/* UGG Category Description Styles
   Place at: /design/perfex/css/ugg-cat.css
   Used by: ok_lang_categories.description for all UGG categories
*/

@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

.ugg-cat {
  font-family: inherit;
  color: inherit;
  padding: .5rem 0 2rem;
}

.ugg-cat-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 1.5rem;
}

/* ── Feature cards ───────────────────────────────────────────────── */
.ugg-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}

.ugg-cat-card {
  background: #f8f7f5;
  border-radius: 12px;
  padding: .9rem 1.1rem;
}

.ugg-cat-card-ico {
  font-size: 22px;
  color: #3b7dd8;
  margin-bottom: 6px;
  min-height: 28px;
}

.ugg-cat-card-ico::before {
  font-family: 'tabler-icons';
  content: "\eb2e";
}

.ugg-cat-card-ico[data-ico="adjustments"]::before          { content: "\ea03"; }
.ugg-cat-card-ico[data-ico="adjustments-horizontal"]::before { content: "\ec38"; }
.ugg-cat-card-ico[data-ico="briefcase"]::before            { content: "\ea46"; }
.ugg-cat-card-ico[data-ico="bulb"]::before                 { content: "\ea51"; }
.ugg-cat-card-ico[data-ico="circle"]::before               { content: "\ea6b"; }
.ugg-cat-card-ico[data-ico="circle-check"]::before         { content: "\ea67"; }
.ugg-cat-card-ico[data-ico="circle-dot"]::before           { content: "\efb1"; }
.ugg-cat-card-ico[data-ico="crown"]::before                { content: "\ed12"; }
.ugg-cat-card-ico[data-ico="droplet"]::before              { content: "\ea97"; }
.ugg-cat-card-ico[data-ico="eye"]::before                  { content: "\ea9a"; }
.ugg-cat-card-ico[data-ico="feather"]::before              { content: "\ee8b"; }
.ugg-cat-card-ico[data-ico="flame"]::before                { content: "\ec2c"; }
.ugg-cat-card-ico[data-ico="flip-flops"]::before           { content: "\f564"; }
.ugg-cat-card-ico[data-ico="hanger"]::before               { content: "\ee9a"; }
.ugg-cat-card-ico[data-ico="heart"]::before                { content: "\eabe"; }
.ugg-cat-card-ico[data-ico="home"]::before                 { content: "\eac1"; }
.ugg-cat-card-ico[data-ico="layers-intersect"]::before     { content: "\eac9"; }
.ugg-cat-card-ico[data-ico="leaf"]::before                 { content: "\ed4f"; }
.ugg-cat-card-ico[data-ico="link"]::before                 { content: "\eade"; }
.ugg-cat-card-ico[data-ico="map-2"]::before                { content: "\eae7"; }
.ugg-cat-card-ico[data-ico="minimize"]::before             { content: "\eaf1"; }
.ugg-cat-card-ico[data-ico="palette"]::before              { content: "\eb01"; }
.ugg-cat-card-ico[data-ico="ruler-2"]::before              { content: "\eed2"; }
.ugg-cat-card-ico[data-ico="run"]::before                  { content: "\ec82"; }
.ugg-cat-card-ico[data-ico="shield-check"]::before         { content: "\eb22"; }
.ugg-cat-card-ico[data-ico="shoe"]::before                 { content: "\efd2"; }
.ugg-cat-card-ico[data-ico="snowflake"]::before            { content: "\ec0b"; }
.ugg-cat-card-ico[data-ico="stack-2"]::before              { content: "\eef7"; }
.ugg-cat-card-ico[data-ico="star"]::before                 { content: "\eb2e"; }
.ugg-cat-card-ico[data-ico="stars"]::before                { content: "\ed38"; }
.ugg-cat-card-ico[data-ico="sun"]::before                  { content: "\eb30"; }

.ugg-cat-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 5px;
}

.ugg-cat-card p {
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.55;
}

/* ── Text sections ───────────────────────────────────────────────── */
.ugg-cat-s {
  margin-bottom: 1.4rem;
}

.ugg-cat-s h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 .7rem;
}

.ugg-cat-s p {
  font-size: 14px;
  line-height: 1.68;
  color: #333;
  margin: 0 0 .7rem;
}

.ugg-cat-s ul {
  padding-left: 1.2rem;
  margin: .4rem 0;
}

.ugg-cat-s li {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.ugg-cat-s h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 1rem 0 .4rem;
  color: #1a1a1a;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.ugg-cat-table-wrap {
  overflow-x: auto;
  margin: .6rem 0 1rem;
  border-radius: 10px;
  border: 1px solid #ebebeb;
}

.ugg-cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ugg-cat-table th {
  background: #f8f7f5;
  color: #333;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid #ebebeb;
}

.ugg-cat-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f2f2f2;
  color: #444;
}

.ugg-cat-table tr:last-child td {
  border-bottom: none;
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.ugg-cat-faq-item {
  margin-bottom: .9rem;
}

.ugg-cat-faq-item h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 .3rem;
  color: #1a1a1a;
}

.ugg-cat-faq-item p {
  font-size: 14px;
  line-height: 1.65;
  color: #444;
  margin: 0;
}

/* ── Numbered steps ──────────────────────────────────────────────── */
.ugg-cat-steps {
  padding-left: 1.3rem;
  margin: .5rem 0 1rem;
  counter-reset: ugg-step;
}

.ugg-cat-steps li {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 6px;
}

/* ── Link list (CTA blocks) ─────────────────────────────────────── */
.ugg-cat-linklist {
  list-style: none;
  padding: 0;
  margin: .6rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ugg-cat-linklist li a {
  display: inline-block;
  color: #3b7dd8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.ugg-cat-linklist li a:hover {
  text-decoration: underline;
}

/* ── Tip box ─────────────────────────────────────────────────────── */
.ugg-cat-tip {
  background: #eaf3fb;
  border-left: 3px solid #3b7dd8;
  border-radius: 0 8px 8px 0;
  padding: 11px 15px 11px 42px;
  font-size: 13px;
  color: #1a4f7a;
  margin: 1rem 0 1.4rem;
  line-height: 1.6;
  position: relative;
}

.ugg-cat-tip::before {
  font-family: 'tabler-icons';
  content: "\ea51";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #3b7dd8;
}

/* ── Photo placement hint ────────────────────────────────────────── */
.ugg-cat-photo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef9f0;
  border: 1px dashed #e0c07a;
  border-radius: 8px;
  padding: 10px 14px 10px 42px;
  font-size: 13px;
  color: #7a5800;
  margin: 1.1rem 0;
  line-height: 1.55;
  position: relative;
}

.ugg-cat-photo::before {
  font-family: 'tabler-icons';
  content: "\ea54";
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 18px;
  color: #b8860b;
}

/* ── Size chips ──────────────────────────────────────────────────── */
.ugg-cat-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: .5rem 0 1rem;
}

.ugg-cat-size {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

/* ── Internal links block ────────────────────────────────────────── */
.ugg-cat-badge {
  display: inline-block;
  background: #e6f4ea;
  color: #2d7d46;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 6px;
}

.ugg-cat-models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: .6rem 0 1.2rem;
}

.ugg-cat-ml {
  background: #f0f4ff;
  color: #3b7dd8;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #c8d8f7;
  display: inline-block;
}

.ugg-cat-ml:hover {
  background: #dce8ff;
  color: #2558a8;
}

.ugg-cat-divider {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 1.5rem 0;
}