/**
 * You can place your custom CSS statements here
 * it is better to write everything custom here
 * because this file won't be replaced during upgrade
 * Don't forget to rename this file to "site.css"
 */

/* ===== shared: section headings (align the two columns) ===== */
#member-main-subscriptions-head,
#member-main-resources-head,
#member-main-links-head {
  font-size: 18px !important; font-weight: 700 !important; color: #111827 !important;
  margin: 0 0 10px !important; padding: 0 !important;
}
#member-main-resources-head::before { content: "Course Materials"; }
#member-main-links-head::before { content: "Account"; }

/* ===== Member page: standard width; give the left column more room
   than aMember's 50/50 so the resource cards stay 2-up and readable ===== */
body.am-page-main .am-layout-two-coll .am-coll-left  { width: 66% !important; }
body.am-page-main .am-layout-two-coll .am-coll-right { width: 34% !important; }

/* ===== Member resources -> clickable card grid ===== */
#member-resources {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
#member-resources > li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 18px 18px 18px 66px !important;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  min-height: 86px;
  box-sizing: border-box;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#member-resources > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: #fca5a5;
}
#member-resources > li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c1";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fef2f2;
  color: #dd0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  z-index: 2;
}
#member-resources > li#resource-link-link-15-wrapper::before { content: "\f025"; }
#member-resources > li#resource-link-link-1-wrapper::before  { content: "\f1c1"; }
#member-resources > li#resource-link-link-14-wrapper::before { content: "\f3cd"; }
#member-resources > li#resource-link-link-6-wrapper::before  { content: "\f1fc"; }
#member-resources > li#resource-link-link-7-wrapper::before  { content: "\f059"; }
#member-resources > li#resource-link-link-26-wrapper::before { content: "\f2ce"; }
#member-resources > li#resource-link-link-27-wrapper::before { content: "\f028"; }
#member-resources .am-resource-link {
  position: static;
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #111827 !important;
  text-decoration: none !important;
  margin: 0 0 4px !important;
  line-height: 1.3;
}
/* stretch the link over the whole card so the entire block is clickable */
#member-resources .am-resource-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#member-resources > li:hover .am-resource-link { color: #dd0d0d !important; }
#member-resources .am-list-resources-desc {
  position: relative;
  margin: 0 !important;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

/* ===== Active Subscriptions box ===== */
#member-subscriptions { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; }
#member-subscriptions > li {
  list-style: none !important;
  margin: 0 !important;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #16a34a;
  border-radius: 14px;
  background: #fff;
  padding: 18px 20px;
}
.am-list-subscriptions-title { display: block; }
.am-list-subscriptions-title strong { font-size: 17px; font-weight: 700; color: #111827; }
.am-list-subscriptions-date { display: block; margin-top: 8px; }
.am-list-subscriptions-date_expires {
  display: inline-block; font-size: 12px; font-weight: 600; color: #166534;
  background: #dcfce7; padding: 3px 11px; border-radius: 999px;
}
.am-list-subscriptions-desc { margin-top: 12px; font-size: 13.5px; color: #6b7280; line-height: 1.6; }
/* Cancel-renewal link -> understated light-purple button (keeps its current position) */
#member-subscriptions .am-list-subscriptions-link { display: block; margin-top: 12px; }
#member-subscriptions .cancel-subscription {
  display: inline-block;
  padding: 8px 16px;
  background: #f3f0fa !important;       /* light purple fill */
  color: #6d28d9 !important;            /* muted purple text */
  border: 1px solid #ddd6f3;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
#member-subscriptions .cancel-subscription:hover {
  background: #ede9fe !important; border-color: #c4b5fd;
}

/* ===== Right column: account links ===== */
#widget-member-main-links { background: none; border: 0; padding: 0; }
#member-main-links { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px; margin-top: 8px; }
#member-main-links .am-list-links { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#member-main-links .am-list-links li { margin: 0 !important; }
#member-main-links .am-list-links a {
  display: block; padding: 6px 12px; border-radius: 8px;
  text-decoration: none !important; color: #374151 !important; font-size: 13px; font-weight: 600;
  line-height: 1.25;
  transition: background .12s, color .12s;
}
#member-main-links .am-list-links a:hover { background: #fef2f2; color: #dd0d0d !important; }

/* ===== Generic form inputs (signup / profile — NOT login) ===== */
body:not(.am-page-login) .am-form:not(.am-auth-form) input[type="text"],
body:not(.am-page-login) .am-form:not(.am-auth-form) input[type="email"],
body:not(.am-page-login) .am-form:not(.am-auth-form) input[type="password"],
body:not(.am-page-login) .am-form:not(.am-auth-form) input[type="tel"],
body:not(.am-page-login) .am-form:not(.am-auth-form) input[type="number"],
body:not(.am-page-login) .am-form:not(.am-auth-form) select,
body:not(.am-page-login) .am-form:not(.am-auth-form) textarea {
  padding: 10px 12px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  box-sizing: border-box;
  max-width: 100%;
}
body:not(.am-page-login) .am-form:not(.am-auth-form) input:focus,
body:not(.am-page-login) .am-form:not(.am-auth-form) select:focus,
body:not(.am-page-login) .am-form:not(.am-auth-form) textarea:focus {
  border-color: #dd0d0d !important;
  box-shadow: 0 0 0 3px rgba(221,13,13,.12) !important;
  outline: none !important;
}
/* Leave room on the right for aMember's password-reveal eye icon (inline bg-image at right edge) */
.am-pass-reveal { padding-right: 36px !important; }

/* ===== Login page: theme it, but KEEP the left padding for aMember's
   built-in person/lock icons (background-image at 5px, padding-left:30px) ===== */
.am-auth-form legend { font-weight: 700; color: #111827; font-size: 18px; padding: 0 8px; }
.am-auth-form input[type="text"],
.am-auth-form input[type="password"] {
  padding: 10px 12px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}
/* Keep extra left padding ONLY for the inputs that have aMember's person/lock icon */
.am-auth-form input[name="amember_login"],
.am-auth-form input[name="amember_pass"] { padding-left: 32px !important; }
.am-auth-form input:focus {
  border-color: #dd0d0d !important;
  box-shadow: 0 0 0 3px rgba(221,13,13,.12) !important;
  outline: none !important;
}
.am-auth-form input[type="submit"] {
  background: #dd0d0d !important; color: #fff !important; border: 0 !important;
  border-radius: 8px !important; padding: 11px 26px !important;
  font-size: 15px !important; font-weight: 700 !important; cursor: pointer;
  transition: background .15s ease;
}
.am-auth-form input[type="submit"]:hover { background: #aa0000 !important; }

/* ===== Signup page (standard aMember width) ===== */
body.am-page-signup .am-signup { margin: 0 auto; }
body.am-page-signup .am-body-content-top h1 { text-align: center; }
/* kill aMember's #dbdbdb side-border box around the page content (amember.css ≥800px) */
body.am-page-signup .am-body .am-body-content-wrapper { border: 0 !important; }

/* "already have an account" notice — red left accent restored */
.am-login-text.am-info {
  background: #f9fafb; border: 1px solid #e5e7eb; border-left: 4px solid #dd0d0d;
  border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-bottom: 20px; color: #374151;
}
.am-login-text.am-info a { color: #dd0d0d; font-weight: 600; }

/* stack each row's label above its field, full width */
.am-signup-form .am-row { display: block !important; margin-bottom: 22px; }
.am-signup-form .am-element-title { display: block !important; width: auto !important; padding: 0 !important; margin: 0 0 10px !important; }
.am-signup-form .am-element-title label { font-weight: 600; color: #111827; font-size: 14px; }
.am-signup-form .am-element { display: block !important; width: auto !important; margin: 0 !important; }
.am-signup-form .required { color: #dd0d0d; }
.am-signup-form .am-element input[type="text"],
.am-signup-form .am-element input[type="email"],
.am-signup-form .am-element input[type="password"] { width: 100%; }
.am-signup-form .am-pass-indicator-wrap { width: 100%; display: block; }

/* FORCE a clean vertical layout. aMember floats the label 35% left
   (.am-form div.am-element-title{float:left;width:35%}) and indents the field
   (.am-element{margin-left:35%}) with specificity (0,2,1), which beat my earlier
   rules — that's why nothing changed. These win on specificity + !important. */
body.am-page-signup .am-signup-form .am-row { float: none !important; margin: 0 0 20px !important; padding: 0 !important; }
body.am-page-signup .am-signup-form .am-element-title { float: none !important; width: 100% !important; text-align: left !important; padding: 0 !important; margin: 0 0 8px !important; }
body.am-page-signup .am-signup-form .am-element { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.am-page-signup #row-product_id_page-0-0 .am-element { margin-top: 16px !important; }
body.am-page-signup #row-paysys_id .am-element { margin-top: 4px !important; }

/* subscription plans -> selectable cards (vertically stacked) */
#row-product_id_page-0-0 .am-element br { display: none !important; }
#row-product_id_page-0-0 .am-element > label {
  display: block; position: relative; cursor: pointer;
  border: 2px solid #e5e7eb; border-radius: 14px; padding: 16px 18px 16px 46px;
  margin: 0 0 24px !important;     /* gap between the two plan cards (block-flow, reliable) */
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#row-product_id_page-0-0 .am-element > label:last-of-type { margin-bottom: 0 !important; }
#row-product_id_page-0-0 .am-element > label:hover { border-color: #fca5a5; }
#row-product_id_page-0-0 .am-element > label:focus-within { border-color: #dd0d0d; box-shadow: 0 0 0 3px rgba(221,13,13,.18); }
#row-product_id_page-0-0 .am-element > label.am-el-checked,
#row-product_id_page-0-0 .am-element > label:has(input:checked) {
  border-color: #dd0d0d; background: #f5f3ff; box-shadow: 0 6px 18px rgba(221,13,13,.10);
}
#row-product_id_page-0-0 .am-element > label > input[type="radio"] {
  position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; accent-color: #dd0d0d;
}
#row-product_id_page-0-0 .am-product-title { font-size: 17px; font-weight: 700; color: #111827; }
#row-product_id_page-0-0 .am-product-terms { font-size: 14px; font-weight: 700; color: #dd0d0d; margin-left: 6px; }
#row-product_id_page-0-0 .am-product-desc { display: block; margin-top: 6px; font-size: 13px; color: #6b7280; line-height: 1.55; }

/* payment methods -> selectable rows, logo before the label text */
#row-paysys_id .am-element { display: block; }
#row-paysys_id label.radio {
  display: flex !important; align-items: center; gap: 12px; margin: 0 0 16px !important; cursor: pointer;
  border: 2px solid #e5e7eb; border-radius: 12px; padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
#row-paysys_id label.radio:last-of-type { margin-bottom: 0 !important; }
#row-paysys_id label.radio:hover { border-color: #fca5a5; }
#row-paysys_id label.radio:focus-within { border-color: #dd0d0d; box-shadow: 0 0 0 3px rgba(221,13,13,.18); }
#row-paysys_id label.radio.am-el-checked,
#row-paysys_id label.radio:has(input:checked) { border-color: #dd0d0d; background: #f5f3ff; }
#row-paysys_id label.radio input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #dd0d0d; }
#row-paysys_id .am-paysystem-desc { order: 1; flex: 0 0 180px; display: flex; align-items: center; }
#row-paysys_id .am-paysystem-title { order: 2; font-weight: 600; color: #111827; }
#row-paysys_id .am-paysystem-desc img { max-width: 180px; max-height: 60px; width: auto; height: auto; display: block; }

/* Continue button — auto width, centered (full width only on small screens) */
body.am-page-signup #row-buttons .am-element { text-align: center !important; }
input.am-cta-signup {
  display: inline-block; width: auto; min-width: 220px;
  background: #dd0d0d !important; color: #fff !important; border: 0 !important;
  border-radius: 10px !important; padding: 14px 44px !important; font-size: 16px !important;
  font-weight: 700 !important; cursor: pointer; transition: background .15s ease, transform .15s ease;
}
input.am-cta-signup:hover { background: #aa0000 !important; transform: translateY(-1px); }

/* ===== Mobile ===== */
@media (max-width: 760px) {
  body.am-page-main .am-layout-two-coll .am-coll-left,
  body.am-page-main .am-layout-two-coll .am-coll-right { width: 100% !important; float: none !important; }
  input.am-cta-signup { width: 100%; }   /* full-width tap target on phones */
}
@media (max-width: 380px) {
  /* tiny phones: let payment title wrap below the logo so 120px slot doesn't crowd */
  #row-paysys_id label.radio { flex-wrap: wrap; }
}

/* ===================================================================
   Apple reader-app signup  (/amember/signup/LearnChinese)
   Registration-only page used as the iOS "External Link Account"
   target. Per Apple reader-app rules this page shows NO plans, NO
   prices, NO payment methods: user registers a free account here, then
   picks a subscription from their account dashboard.

   Everything below is scoped with :has(.am-lc-apple) so it affects ONLY
   this form and never the main priced signup. To activate: add one HTML
   brick at the TOP of the LearnChinese form containing exactly:
       <div class="am-lc-apple"></div>
   =================================================================== */

/* width: use aMember's DEFAULT signup width (same as the main /signup page,
   works desktop + mobile). No narrow max-width override here. */

/* replace aMember's default H1 with our own brand intro */
body.am-page-signup:has(.am-lc-apple) .am-body-content-top h1 { display: none; }

/* brand intro rendered from the marker div (red accent bar + heading + subtitle) */
body.am-page-signup:has(.am-lc-apple) .am-lc-apple {
  text-align: center; margin: 0 0 28px; padding-top: 18px;
  border-top: 4px solid #dd0d0d; border-radius: 4px;
}
.am-lc-apple::before {
  content: "Create your Melnyks Chinese account";
  display: block; font-size: 24px; font-weight: 800; color: #111827; letter-spacing: -.01em;
  line-height: 1.25;
}
.am-lc-apple::after {
  content: "Register below to create an account on Melnyks Chinese.";
  display: block; margin-top: 8px; font-size: 14.5px; color: #6b7280; line-height: 1.55;
}
/* (Submit button uses the default .am-cta-signup styling, identical to the
   main signup page: auto-width + centered, full-width on phones.) */

/* Light-purple accent: red border around each field, light-purple fill inside
   (scoped to the LearnChinese form via its saved-form id) */
form[data-saved_form_id="11"] .am-element input[type="text"],
form[data-saved_form_id="11"] .am-element input[type="email"],
form[data-saved_form_id="11"] .am-element input[type="password"] {
  border-color: #dd0d0d !important;   /* red around the field */
  background: #f5f3ff !important;      /* light purple inside */
}

/* First & Last Name -> stacked top/bottom with clear spacing between them
   (scoped to this form so the main signup is untouched) */
form[data-saved_form_id="11"] #row-name-0 .am-element.group {
  display: flex; flex-direction: column; gap: 16px;
}
form[data-saved_form_id="11"] #row-name-0 .am-element.group input { width: 100% !important; }