/* =========================================================================
   PREMIUM THEME v2 — client color palette
   Terracotta #c7522a · Sandy Gold #e5c185 · Cream #fbf2c4 · Sage #74a892 · Deep Teal #008585
   Layered on top of AdminLTE without touching core view files.
   ========================================================================= */

:root{
  /* ---- palette (as supplied) ---- */
  --teal:           #008585;
  --teal-dark:      #005f5f;
  --teal-light:     #4fa3a3;
  --terracotta:     #c7522a;
  --terracotta-dark:#a34220;
  --terracotta-light:#dd7350;
  --gold:           #e5c185;
  --gold-dark:      #cda361;
  --cream:          #fbf2c4;
  --sage:           #74a892;
  --sage-dark:      #5a8a76;

  /* ---- neutrals derived for a warm, readable light theme ---- */
  --ink:            #2b2420;
  --text-primary:   #2b2420;
  --text-muted:     #6e6255;
  --text-faint:     #9c9182;

  --bg:             #fbf8f0;
  --surface:        #fffdf5;
  --surface-2:      #fdf8e9;
  --surface-3:      #f7edd1;
  --border:         #e6dcc2;
  --border-soft:    #efe7d1;

  /* ---- status ---- */
  --success:        var(--sage);
  --warning:        var(--gold-dark);
  --danger:         #c0392b;

  --radius:         14px;
  --radius-sm:      10px;
  --shadow-soft:    0 6px 22px rgba(43,36,32,0.08);
  --shadow-lift:    0 14px 36px rgba(43,36,32,0.14);
  --ease:           cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body, .content-wrapper, .wrapper{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-primary);
}

h1,h2,h3,h4,h5,.box-title,.login-box-msg,.info-box-text,.small-box h3{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

::selection{ background: var(--terracotta); color: #fff; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.main-sidebar, .left-side, .wrapper, .skin-blue .main-sidebar, .skin-blue-light .main-sidebar{
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%) !important;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.sidebar-menu > li > a{
  color: rgba(255,255,255,0.78) !important;
  border-left: 3px solid transparent;
  transition: color .2s var(--ease), border-color .25s var(--ease), background .2s var(--ease);
  position: relative;
}
.sidebar-menu > li > a:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
.sidebar-menu > li.active > a, .sidebar-menu > li.active > a:hover{
  background: rgba(199,82,42,0.22) !important;
  border-left-color: var(--terracotta);
  color: #ffffff !important;
}
.sidebar-menu > li.treeview.active > a { color: #ffffff !important; }
.sidebar-menu li > a > .fa, .sidebar-menu li > a > .ion, .sidebar-menu li > a > .glyphicon{
  transition: transform .2s var(--ease), color .2s var(--ease);
  width: 22px;
  color: rgba(255,255,255,0.85) !important;
}
/* The original template hardcodes utility classes like text-aqua, text-red,
   text-green, etc. directly on sidebar icons, assuming a dark charcoal
   sidebar. Our sidebar background is teal, so text-aqua (also teal) made
   icons nearly invisible against it. Force every sidebar icon to a visible
   color regardless of whichever text-* class it happens to carry. */
.sidebar-menu li > a > .fa[class*="text-"],
.sidebar-menu li > a > .ion[class*="text-"],
.sidebar-menu li > a > .glyphicon[class*="text-"]{
  color: rgba(255,255,255,0.85) !important;
}
.sidebar-menu > li > a:hover > .fa,
.sidebar-menu > li > a:hover > .ion{ transform: translateX(2px) scale(1.05); color: var(--gold) !important; }
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .ion{ color: #ffffff !important; }

.sidebar-menu .treeview-menu > li > a{ color: rgba(255,255,255,0.62) !important; }
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a{ color: #ffffff !important; }

.main-header .logo{
  background: var(--teal-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.main-header .logo .logo-lg b,
.main-header .logo .logo-mini b{
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pt-logo-mini-img{
  width: 34px; height: 34px; border-radius: 9px; display: inline-block; vertical-align: middle;
  background: var(--cream);
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(251,242,196,0.85), 0 2px 6px rgba(0,0,0,0.25);
}

.main-header .navbar, body.skin-blue .main-header .navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 12px rgba(43,36,32,0.06);
}
.sidebar-menu > li > .treeview-menu, body.skin-blue .sidebar-menu > li > .treeview-menu{
  background: rgba(0,0,0,0.12) !important;
  margin: 0;
}
.main-header .navbar .nav > li > a{ color: var(--text-muted) !important; }
.main-header .navbar .nav > li > a:hover{ color: var(--terracotta) !important; background: var(--surface-2) !important; }
.main-header .sidebar-toggle{ color: var(--text-muted) !important; }
.main-header .sidebar-toggle:hover{ color: var(--terracotta) !important; }

.user-header{
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
}

/* =========================================================================
   CONTENT / CARDS / BOXES
   ========================================================================= */
.content-wrapper, .right-side{ background: var(--bg) !important; }

.box, .small-box, .info-box, .panel{
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-primary);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* NOTE: intentionally no entrance `animation` on cards. A persistent
   animation-name creates a new CSS stacking context on that element for as
   long as it's applied — and if a modal happens to be a DOM descendant of a
   .box (as on the POS payment modal), the modal gets trapped below its own
   backdrop, making it unclickable/unclosable. Confirmed and reproduced this
   exact failure on the POS page's Cash button. Not worth it for a cosmetic
   fade-in — see the same note on .modal-content below. */
/* Modals: styled like the cards above, but deliberately WITHOUT a persistent
   CSS `animation`. A non-none animation-name creates a new stacking context
   for as long as it's applied (even after the animation finishes), which
   traps Bootstrap's modal below its own backdrop and makes it unclickable.
   Bootstrap already animates modals via its own .fade/.in transition. */
.modal-content{
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lift) !important;
  color: var(--text-primary);
  overflow: hidden;
}
.box:hover{ box-shadow: var(--shadow-lift) !important; }
.box-header{ border-bottom: 1px solid var(--border-soft) !important; }
.box-header .box-title{ color: var(--ink) !important; font-weight: 700; }
.box-footer{ background: transparent !important; border-top: 1px solid var(--border-soft) !important; }

/* dashboard stat tiles */
.small-box{
  overflow: hidden;
  position: relative;
}
.small-box::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120px 80px at 100% 0%, rgba(199,82,42,0.08), transparent 70%);
  pointer-events:none;
}
.small-box > .inner{ position:relative; z-index:1; }
.small-box h3{ font-weight: 800; color: var(--ink); }
.small-box p{ color: var(--text-muted); }
.small-box .icon{ color: rgba(43,36,32,0.06) !important; transition: transform .3s var(--ease), color .3s var(--ease); }
.small-box:hover .icon{ transform: scale(1.08) rotate(-4deg); color: rgba(43,36,32,0.10) !important; }
.small-box > .small-box-footer{
  background: rgba(43,36,32,0.04) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-soft);
}
.small-box > .small-box-footer:hover{ color: var(--terracotta) !important; background: rgba(43,36,32,0.07) !important; }

/* re-tint the AdminLTE bg-* utility colors to the new palette (mapped, not removed) */
.bg-aqua, .bg-blue, .bg-light-blue{ background: linear-gradient(135deg, var(--teal-light), var(--teal)) !important; }
.bg-green{ background: linear-gradient(135deg, var(--sage), var(--sage-dark)) !important; }
.bg-yellow{ background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; }
.bg-red{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; }
.bg-purple{ background: linear-gradient(135deg, var(--teal-dark), var(--ink)) !important; }

.info-box{ padding: 4px; background: var(--surface) !important; }
.info-box-icon{ border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.info-box-content{ color: var(--text-primary); }
.info-box-text{ color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.info-box-number{ color: var(--ink) !important; font-weight: 800; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{ border-radius: var(--radius-sm) !important; font-weight: 600; letter-spacing: .01em; transition: all .18s var(--ease) !important; border-width: 1px !important; }
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary, .btn-info{
  background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important;
  border-color: var(--terracotta-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(199,82,42,0.25);
}
.btn-primary:hover, .btn-info:hover{
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(199,82,42,0.35);
  transform: translateY(-1px);
}
.btn-success{ background: linear-gradient(135deg,var(--sage),var(--sage-dark)) !important; border-color:var(--sage-dark) !important; color:#fff !important; }
.btn-danger{ background: linear-gradient(135deg,#d9584a,var(--danger)) !important; border-color:#a5301f !important; color:#fff !important; }
.btn-warning{ background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; border-color:var(--gold-dark) !important; color:#3a2e14 !important; }
.btn-default{
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.btn-default:hover{ background: var(--surface-3) !important; border-color: var(--terracotta) !important; color: var(--terracotta) !important; }

/* subtle ripple */
.btn{ position: relative; overflow: hidden; }
.btn .ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.5); animation: ripple .55s var(--ease);
  pointer-events: none;
}
@keyframes ripple{ to{ transform: scale(3); opacity: 0; } }

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder{ color: var(--text-faint) !important; }
.form-control:focus{
  border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 3px rgba(199,82,42,0.14) !important;
}
label{ color: var(--text-muted); font-weight: 600; }
.select2-container--default .select2-selection--single{
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important;
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table, .dataTable{ color: var(--text-primary) !important; }
.table > thead > tr > th{
  color: var(--text-muted) !important;
  border-bottom: 2px solid var(--border) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .05em; font-weight: 700;
  background: var(--surface-2);
}
.table > tbody > tr > td{ border-top: 1px solid var(--border-soft) !important; }
.table-hover > tbody > tr:hover{ background: var(--surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd){ background: rgba(43,36,32,0.015) !important; }
.box .table{ margin-bottom: 0; }

/* =========================================================================
   MODALS / DROPDOWNS
   ========================================================================= */
.modal-header{ border-bottom: 1px solid var(--border-soft) !important; }
.modal-footer{ border-top: 1px solid var(--border-soft) !important; }
.dropdown-menu{
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lift) !important; border-radius: var(--radius-sm) !important;
}
.dropdown-menu > li > a{ color: var(--text-muted) !important; }
.dropdown-menu > li > a:hover{ background: var(--surface-2) !important; color: var(--terracotta) !important; }

/* scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--terracotta); }

/* loading shimmer (used by premium-theme.js on async widgets) */
.pt-skeleton{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* =========================================================================
   ALERTS
   ========================================================================= */
.alert{
  position: relative;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft);
  padding: 16px 44px 16px 20px !important;
  margin-bottom: 20px;
}
.alert.alert-dismissable, .alert-dismissible{ padding-right: 44px !important; }
.alert .close{
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 20px;
  line-height: 1;
}
.alert-success{ background: linear-gradient(135deg, rgba(116,168,146,0.20), rgba(116,168,146,0.08)) !important; border-color: rgba(116,168,146,0.45) !important; }
.alert-info{ background: linear-gradient(135deg, rgba(0,133,133,0.16), rgba(0,133,133,0.06)) !important; border-color: rgba(0,133,133,0.35) !important; }
.alert-warning{ background: linear-gradient(135deg, rgba(229,193,133,0.35), rgba(229,193,133,0.12)) !important; border-color: rgba(205,163,97,0.5) !important; }
.alert-danger{ background: linear-gradient(135deg, rgba(192,57,43,0.16), rgba(192,57,43,0.06)) !important; border-color: rgba(192,57,43,0.35) !important; }
.alert a{ color: var(--terracotta) !important; text-decoration: underline; }
.alert .close{ color: var(--text-primary) !important; opacity: .6; text-shadow: none !important; }
.alert .close:hover{ opacity: 1; }

/* =========================================================================
   LABELS / BADGES / STATUS PILLS
   ========================================================================= */
.label{ border-radius: 6px !important; font-weight: 600 !important; letter-spacing: .02em; padding: .3em .6em; }
.label-success{ background: linear-gradient(135deg,var(--sage),var(--sage-dark)) !important; color:#fff !important; }
.label-danger{ background: linear-gradient(135deg,#d9584a,var(--danger)) !important; color:#fff !important; }
.label-warning{ background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; color:#3a2e14 !important; }
.label-info{ background: linear-gradient(135deg, var(--teal-light), var(--teal)) !important; color:#fff !important; }
.label-primary{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; color:#fff !important; }
.label-default{ background: var(--surface-3) !important; color: var(--text-muted) !important; }
.badge{ background: var(--terracotta) !important; color:#fff !important; border-radius: 20px !important; font-weight: 700; }

/* =========================================================================
   PANELS / WELLS / CALLOUTS
   ========================================================================= */
.panel{ background: var(--surface) !important; }
.panel-default > .panel-heading{ background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border-soft) !important; }
.well{ background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-primary); box-shadow: none !important; }
.callout{ background: var(--surface-2) !important; border-color: var(--teal) !important; color: var(--text-primary); }
.callout.callout-info{ border-color: var(--teal) !important; background: rgba(0,133,133,0.08) !important; color: var(--text-primary) !important; }
.callout.callout-danger{ border-color: var(--danger) !important; background: rgba(192,57,43,0.08) !important; color: var(--text-primary) !important; }
.callout.callout-warning{ border-color: var(--gold-dark) !important; background: rgba(205,163,97,0.12) !important; color: var(--text-primary) !important; }
.callout.callout-success{ border-color: var(--sage-dark) !important; background: rgba(116,168,146,0.12) !important; color: var(--text-primary) !important; }
.callout h4, .callout p{ color: var(--text-primary) !important; }
.callout a{ color: var(--terracotta) !important; font-weight: 600; }

/* modal headers (Add Customer, Add Item, etc.) used the old theme's
   teal-to-blue gradient — switched to cream to match the rest of the app */
.header-custom{
  background: var(--cream) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border);
}
.header-custom .modal-title{ color: var(--ink) !important; }
.header-custom .close{ color: var(--ink) !important; opacity: 0.6; text-shadow: none !important; }
.header-custom .close:hover{ opacity: 1; color: var(--terracotta) !important; }

/* =========================================================================
   TABS / PILLS / BREADCRUMBS / PAGINATION
   ========================================================================= */
.nav-tabs{ border-bottom-color: var(--border) !important; }
.nav-tabs > li > a{ color: var(--text-muted) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; }
.nav-tabs > li > a:hover{ background: var(--surface-2) !important; border-color: var(--border-soft) !important; color: var(--terracotta) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  background: var(--surface) !important; color: var(--terracotta) !important; border-color: var(--border) var(--border) transparent !important;
}
.nav-pills > li.active > a{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; color:#fff !important; }

/* .nav-tabs-custom — a distinct AdminLTE widget (used on Settings pages
   like SMS API / Site Settings), separate from generic .nav-tabs/.box */
.nav-tabs-custom{
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-soft);
}
.nav-tabs-custom > .nav-tabs{ border-bottom-color: var(--border) !important; }
.nav-tabs-custom > .nav-tabs > li.header{ color: var(--text-muted) !important; }
.nav-tabs-custom > .nav-tabs > li > a{ color: var(--text-muted) !important; background: transparent !important; }
.nav-tabs-custom > .nav-tabs > li > a:hover{ color: var(--terracotta) !important; }
.nav-tabs-custom > .nav-tabs > li.active{ border-top-color: var(--terracotta) !important; }
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a{
  background: var(--surface) !important;
  color: var(--terracotta) !important;
  border-left-color: var(--border) !important;
  border-right-color: var(--border) !important;
}
.nav-tabs-custom > .tab-content{
  background: var(--surface) !important;
  border-radius: 0 0 var(--radius) var(--radius);
}
.breadcrumb{ background: transparent !important; color: var(--text-muted); }
.breadcrumb > li + li::before{ color: var(--text-faint); }
.breadcrumb > .active{ color: var(--text-primary); }
.pagination > li > a, .pagination > li > span{ background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.pagination > li > a:hover{ background: var(--surface-2) !important; color: var(--terracotta) !important; }
.pagination > .active > a, .pagination > .active > span{ background: var(--terracotta) !important; border-color: var(--terracotta-dark) !important; color:#fff !important; }

/* =========================================================================
   TOOLTIPS / POPOVERS / PROGRESS
   ========================================================================= */
.tooltip-inner{ background: var(--ink) !important; color: #fff !important; }
.tooltip.top .tooltip-arrow{ border-top-color: var(--ink) !important; }
.tooltip.bottom .tooltip-arrow{ border-bottom-color: var(--ink) !important; }
.popover{ background: var(--surface) !important; border-color: var(--border) !important; }
.popover-title{ background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border-soft) !important; }
.progress{ background: var(--surface-3) !important; box-shadow: none !important; }
.progress-bar{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; }

/* text-* utility colors kept legible on the light surface */
.text-muted{ color: var(--text-faint) !important; }
.text-blue{ color: var(--teal) !important; }
.text-green{ color: var(--sage-dark) !important; }
.text-red{ color: var(--danger) !important; }
.text-yellow, .text-warning{ color: var(--gold-dark) !important; }
.text-aqua{ color: var(--teal) !important; }

/* =========================================================================
   ROUNDED CORNERS EVERYWHERE — commonly-missed square elements
   ========================================================================= */
.input-group-addon{
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.input-group .form-control:first-child,
.input-group-addon:first-child{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child,
.input-group-addon:last-child{ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.img-circle, .user-image, .direct-chat-img, .table img.img-circle{ border-radius: 50% !important; }
.thumbnail, .box img, img.product-image, .item-img{ border-radius: var(--radius-sm) !important; overflow: hidden; }

/* iCheck custom checkboxes/radios */
.icheckbox_square-blue, .iradio_square-blue,
.icheckbox_minimal, .iradio_minimal{ border-radius: 5px !important; overflow: hidden; }
.icheckbox_square-blue.checked, .iradio_square-blue.checked{ border-radius: 5px !important; }

.progress{ border-radius: 20px !important; overflow: hidden; }
.progress-bar{ border-radius: 20px !important; }

.well, .panel{ border-radius: var(--radius) !important; overflow: hidden; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{ border-radius: var(--radius-sm) !important; }
table.dataTable{ border-radius: var(--radius-sm); overflow: hidden; }

.navbar-custom-menu .dropdown-menu, .user-menu{ border-radius: var(--radius) !important; overflow: hidden; }
.tooltip-inner, .popover{ border-radius: var(--radius-sm) !important; }
.select2-container--default .select2-selection--single,
.select2-dropdown{ border-radius: var(--radius-sm) !important; }

/* footer credit link */
.main-footer{ color: var(--text-muted); background: var(--surface) !important; border-top: 1px solid var(--border-soft); }
.pt-footer-credit{
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.pt-footer-credit:hover, .pt-footer-credit:focus{
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  text-decoration: none;
}