/* =====================================================
   AFTIR COMPONENTS v1.0
===================================================== */

/* =====================================================
   Brand Variables
===================================================== */

:root {
  --aftir-brown: #573817;
  --aftir-olive: #60764a;
  --aftir-olive-gold: #bfb76b;
  --aftir-cream: #f6ead4;
  --aftir-text: #2f2f2f;

  --aftir-bronze-panel: rgba(226,196,150,.72);
  --aftir-soft-border: rgba(125,105,70,.20);
  --aftir-glass-border: rgba(255,255,255,.30);
}

/* =====================================================
   Buttons
===================================================== */

.aftir-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  height: 40px;
  min-width: 150px;
  padding: 0 18px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    #c8c078 0%,
    #bfb76b 45%,
    #aca45d 100%
  );
  color: var(--aftir-brown);
  border: 1px solid rgba(96,118,74,.55);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  box-shadow:
    0 6px 18px rgba(87,56,23,.18),
    inset 0 1px 0 rgba(255,255,255,.45);

  transition: all .25s ease;
}

.aftir-button-primary:hover {
  background: linear-gradient(
    to bottom,
    #d6ce84 0%,
    #c8c078 45%,
    #b8b066 100%
  );
  color: var(--aftir-brown);
  transform: translateY(-2px);
}

.aftir-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

      height: 40px;
  min-width: 150px;
  padding: 0 18px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;

    background: rgba(246,234,212,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(96,118,74,.30);
    border-radius: 999px;

    color: var(--aftir-brown);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    box-shadow:
        0 6px 18px rgba(87,56,23,.12),
        inset 0 1px 0 rgba(255,255,255,.55);

    transition: all .25s ease;
}

.aftir-button-secondary:hover {
    background: rgba(246,234,212,.72);
    color: var(--aftir-brown);
    transform: translateY(-2px);
}

.aftir-button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  height: 40px;
  min-width: 150px;
  padding: 0 18px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  border-radius: 999px;
  background: linear-gradient(180deg,#8f2f24 0%,#6f1f19 100%);
  color: #fff !important;
  border: 1px solid rgba(87,56,23,.35);
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(87,31,23,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: all .25s ease;
}

.aftir-button-danger:link,
.aftir-button-danger:visited,
.aftir-button-danger:hover,
.aftir-button-danger:active {
  color: #fff !important;
  text-decoration: none !important;
}

.aftir-button-danger:hover {
  background: linear-gradient(180deg,#a83a2d 0%,#7a241d 100%);
  transform: translateY(-2px);
}

/* =====================================================
   Pills
===================================================== */

.aftir-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
}

.aftir-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(246,234,212,.34);
  border: 1px solid rgba(96,118,74,.34);
  color: var(--aftir-olive);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 5px rgba(87,56,23,.08);
}

/* =====================================================
   Cards
===================================================== */

.aftir-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(87,56,23,.18);
  border: 1px solid var(--aftir-glass-border);
  color: var(--aftir-text);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 18px 48px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.aftir-card:hover {
  transform: translateY(-8px);
  background: rgba(87,56,23,.24);
  border-color: rgba(255,255,255,.46);
  box-shadow:
    0 28px 70px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.aftir-card img {
  width: 100%;
  display: block;
}

.aftir-card-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 22px 20px;
  background: var(--aftir-bronze-panel);
  border-top: 1px solid rgba(255,255,255,.28);
}

.aftir-card-title {
  margin: 0 0 8px;
  color: var(--aftir-brown);
  font-size: 27px;
  font-weight: normal;
}

.aftir-card-text {
  margin: 0;
  color: var(--aftir-text);
  line-height: 1.7;
}

.aftir-card-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--aftir-brown);
  font-weight: 700;
  text-decoration: none;
}

/* =====================================================
   Panels
===================================================== */

.aftir-panel {
  padding: 30px 26px;
  background: var(--aftir-bronze-panel);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  color: var(--aftir-text);

  box-shadow:
    0 18px 48px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.45);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* =====================================================
   Typography
===================================================== */

.aftir-section-title {
  color: var(--aftir-brown);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: 2px;
}

.aftir-body-text {
  color: var(--aftir-text);
  line-height: 1.8;
}

/* =====================================================
   Form Components
===================================================== */

.aftir-form-card {
  background: rgba(246,234,212,.56);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 24px;
  padding: 28px;
  color: var(--aftir-text);
  box-shadow:
    0 18px 46px rgba(87,56,23,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.aftir-subcard {
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(96,118,74,.22);
  border-radius: 18px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.aftir-field label,
.aftir-label {
  display: block;
  margin-bottom: 8px;
  color: var(--aftir-brown);
  font-weight: 700;
}

.aftir-field input,
.aftir-field select,
.aftir-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(96,118,74,.30);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--aftir-text);
  font-size: 15px;
}

.aftir-field textarea {
  min-height: 130px;
  resize: vertical;
}

.aftir-field input::placeholder,
.aftir-field textarea::placeholder {
  color: rgba(47,47,47,.58);
}

.aftir-fieldset {
  display: grid;
  gap: 16px;
}

.aftir-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.aftir-notice {
  background: rgba(246,234,212,.42);
  border: 1px solid rgba(96,118,74,.24);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--aftir-brown);
}

.admin-form,
.aftir-form {
  display: grid;
  gap: 16px;
}

.admin-form label,
.aftir-form label {
  display: grid;
  gap: 8px;
  color: var(--aftir-brown);
  font-weight: 700;
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.aftir-form input,
.aftir-form select,
.aftir-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(96,118,74,.30);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--aftir-text);
  font-size: 15px;
}

.admin-form textarea,
.aftir-form textarea {
  min-height: 130px;
  resize: vertical;
}

.form-row,
.aftir-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 700px) {
  .form-row,
  .aftir-form-row {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   Utilities
===================================================== */

.aftir-text-brown {
  color: var(--aftir-brown);
}

.aftir-text-olive {
  color: var(--aftir-olive);
}

.aftir-text-cream {
  color: var(--aftir-cream);
}

/* =====================================================
   Editor Shared Cream Forms
===================================================== */

.editor-main-area .panel,
.editor-main-area > .panel,
.editor-card-fix,
.card {
  background: rgba(246,234,212,.62) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 24px !important;
  color: var(--aftir-text) !important;
  box-shadow:
    0 18px 46px rgba(87,56,23,.14),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

.editor-main-area .panel h1,
.editor-main-area .panel h2,
.editor-main-area .panel h3,
.editor-main-area .panel h4,
.editor-main-area .panel label,
.editor-main-area .panel strong,
.editor-main-area .panel p,
.editor-main-area .panel li,
.editor-main-area .panel span,
.card h2,
.card h3,
.card p,
.card label,
.card strong {
  color: var(--aftir-brown) !important;
}

.editor-main-area input,
.editor-main-area textarea,
.editor-main-area select,
.editor-main-area .rich-editor,
.card input,
.card textarea,
.card select,
.editor-card-fix input,
.editor-card-fix textarea,
.editor-card-fix select {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(96,118,74,.30) !important;
  border-radius: 14px !important;
  color: var(--aftir-text) !important;
}

.custom-background-upload,
.premium-section-card,
.aftir-editor-subcard {
  background: rgba(255,255,255,.28) !important;
  border: 1px solid rgba(96,118,74,.22) !important;
  border-radius: 18px !important;
}

/* =====================================================
   Shared Notices
===================================================== */

.aftir-notice{
    padding:16px 18px;
    border-radius:16px;
    margin:18px 0;
    border:1px solid;
}

.aftir-notice-success{
    background:rgba(191,183,107,.18);
    border-color:rgba(96,118,74,.45);
    color:var(--aftir-brown);
}

.aftir-notice-error{
    background:rgba(143,47,36,.10);
    border-color:rgba(143,47,36,.35);
    color:#6f1f19;
}
/* =====================================================
   Shared Admin Cards / Rows
===================================================== */

.aftir-panel-card {
  background: rgba(246,234,212,.62);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 24px;
  color: var(--aftir-text);
  box-shadow:
    0 18px 46px rgba(87,56,23,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.aftir-sort-card {
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(96,118,74,.18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

.aftir-empty-state {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.24);
  border: 1px dashed rgba(96,118,74,.28);
  color: var(--aftir-brown);
}

.aftir-status-text {
  color: var(--aftir-brown);
  font-weight: 700;
}