/**
 * SRX Address Book - Account page styles
 *
 * Author:  MJ Bomar
 * Version: 1.1.0
 *
 * Moved here on 2026-06-26 from the inline <style> block in
 * srx-address-book-account-modals-3c.php, with no rule changes. This file loads only on the
 * My Account pages (enqueued conditionally in functions.php) and after the site stylesheets,
 * so the Address Book modal looks exactly as it did when the CSS lived inline.
 *
 * Changelog:
 * 1.1.0 (2026-07-18) - Took in the Saved Addresses page rules the Phase 4 file
 *   (1.2.8) used to print inline with the page markup: the address cards grid,
 *   the Client/Self usage badges, and the Edit/Delete link row. Moved word for
 *   word; this stylesheet already loads on every My Account page, so the rules
 *   simply moved home.
 * 1.0.0 (2026-06-26) - First version: the account Address Book modal CSS, lifted out of the
 *   PHP file unchanged.
 */

	/* ===== SRX Modal (3C) ===== */
	.srx-modal{position:fixed;inset:0;z-index:9999;display:none}
	.srx-modal[aria-hidden="false"]{display:block}
	.srx-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
	.srx-modal__dialog{position:relative;z-index:1;max-width:900px;width:96vw;margin:6vh auto;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.25);padding:22px}
	.srx-modal__close{position:absolute;top:10px;right:14px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
	.srx-modal__title{margin:0 0 14px;font-size:clamp(18px,2.2vw,22px);font-weight:700}

	.srx-form{margin-top:6px}
	.srx-grid{display:grid;grid-template-columns:1fr;row-gap:14px}
	@media (min-width:720px){ .srx-grid{grid-template-columns:1fr 1fr;column-gap:16px} .srx-span-2{grid-column:1 / -1} }
	.srx-field{display:flex;flex-direction:column;gap:6px}
	.srx-label{font-weight:600}
	.srx-required{color:#b3261e}
	.srx-hint{font-size:12px;color:#6b6d79;line-height:1.4}
	.srx-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;box-sizing:border-box}
	.srx-input--readonly{background:#f5f5f7;color:#666}
	.srx-actions{margin-top:14px}
	.srx-btn{background:#371d4f;color:#fff;font-size:16px;line-height:1.2;font-weight:600;border:0;border-radius:8px;padding:12px 18px;cursor:pointer}
	.srx-btn:hover{filter:brightness(1.05)}

    /* === SRX 3C — Responsive modal polish (append-only) === */
.srx-modal__dialog{
  /* width + side padding for small screens */
  width: min(96vw, 900px);
  box-sizing: border-box;
  padding: clamp(16px, 3.2vw, 24px);
  /* height + internal scroll (works with mobile keyboards) */
  max-height: calc(100dvh - 24px);
  max-height: calc(100svh - 24px);
  overflow: auto;
}

/* keep a comfortable right gutter for fields */
.srx-field, .srx-input{
  box-sizing: border-box;
}

/* close button sits inside padded edge */
.srx-modal__close{
  right: clamp(12px, 2.5vw, 16px);
  top: clamp(8px, 1.8vw, 12px);
}

/* title spacing on tight viewports */
@media (max-width: 520px){
  .srx-modal__title{ margin: 0 0 12px; }
  .srx-grid{ row-gap: 12px; }
  .srx-btn{ width: 100%; }
}

/* when the dialog is very tall, add a subtle bottom padding
   so the Save button never kisses the rounded corner */
.srx-modal__dialog::after{
  content: "";
  display: block;
  height: 6px;
}

.srx-modal__dialog{
  -webkit-overflow-scrolling: touch;
}

.srx-input--readonly:focus{
  outline: none;
  box-shadow: none;
}

/* === SRX — Add extra safe padding at bottom of modal === */
.srx-modal__dialog {
  padding-bottom: clamp(32px, 6vh, 60px); /* adds breathing room below Save button */
}

@supports (env(safe-area-inset-bottom)) {
  .srx-modal__dialog {
    padding-bottom: calc(clamp(32px, 6vh, 60px) + env(safe-area-inset-bottom));
  }
}

/* Ensure the modal suggestions panel sits under its field */
.srx-field { position: relative; }
.srx-ac-list-modal { top: calc(100% + 6px); margin-top: 0; }

  /* === SRX — Modal Shipping Validate (Saved Addresses) === */
  .srx-modal-validate{
    margin-top: 12px;
  }
  .srx-modal-validate-btn{
    margin-top: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--wp--preset--color--custom-dark-blue-magenta, #2b1b3d);
    box-shadow: 0 1px 0 rgba(0,0,0,.14);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter .15s ease, transform .02s ease;
  }
  .srx-modal-validate-btn:hover{
    filter: brightness(1.06);
  }
  .srx-modal-validate-btn:active{
    transform: translateY(1px);
  }
  .srx-modal-validate-btn[disabled]{
    opacity: .55;
    cursor: not-allowed;
  }
  .srx-modal-validate-note{
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    display: none;
  }

  .srx-modal-validate-note.is-visible{
  display: block;
}

  .srx-modal-validate-note.is-error{
    color: #b3261e;
  }
  .srx-modal-validate-note.is-success{
    color: #2e7d32;
  }



/* ===========================================================
   My Account "Saved Addresses" page: the address cards grid, the
   Client/Self usage badges, and the Edit/Delete link row. Moved
   here from srx-address-book-checkout-and-account-p4.php on
   2026-07-18, no rule changes.
   =========================================================== */
#srx-saved-addresses { --srx-gap:22px; --srx-gap-lg:30px; --srx-br:10px; --srx-border:#e5e5ea; --srx-muted:#6b6b76; --srx-link:#4b2548; --srx-danger:#b3261e; --srx-default:#2a7a3b; }
				#srx-saved-addresses .srx-title { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; }
				#srx-saved-addresses .srx-sub { margin: 0 0 var(--srx-gap-lg); color: var(--srx-muted); }
				.srx-section { margin-bottom: var(--srx-gap-lg); }
				.srx-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin: 0 0 10px; }
				.srx-h2 { margin:0; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }
				.srx-add { color: var(--srx-link); text-decoration: none; font-weight: 600; }
				.srx-add:hover { text-decoration: underline; }
				.srx-cards { list-style:none; margin:0; padding:0; display:grid; gap: var(--srx-gap); grid-template-columns: 1fr; }
				@media (min-width: 500px) { .srx-cards { grid-template-columns: 1fr 1fr; } }
				@media (min-width: 768px) { .srx-cards { grid-template-columns: 1fr 1fr 1fr; } }
				.srx-card { border:1px solid var(--srx-border); border-radius: var(--srx-br); padding:16px; background:#fff; }
				.srx-address { font-style: normal; line-height: 1.4; }
				.srx-actions { margin-top: 8px; font-size: 14px; }
				.srx-link { color: var(--srx-link); text-decoration: none; }
				.srx-link:hover { text-decoration: underline; }
				.srx-sep { display:inline-block; padding: 0 8px; color: var(--srx-muted); }
				.srx-default { color: var(--srx-default); font-weight: 700; }
				.srx-danger { color: var(--srx-danger); }
        .srx-link.is-busy { opacity: .6; pointer-events: none; }
                .srx-address-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.srx-usage-badge{
  font-size:12px;
  font-weight:600;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}

/* Client = drop-ship to client */
.srx-usage-client{
  border-color:#b3261e;
  color:#b3261e;
  background:#fdeaea;
}

/* Self = home/business */
.srx-usage-self{
  border-color:#2a7a3b;
  color:#2a7a3b;
  background:#e6f4ea;
}