/* ==========================================================================
   Giftribute Member Management — Frontend Styles v1.0.9
   Primary: #B08082 | Secondary: #C3935B | Font: hkgroteskpro / Arial
   ========================================================================== */

:root {
  --bsp-primary:       #B08082;
  --bsp-primary-dark:  #9a696b;
  --bsp-primary-light: #fbf5f5;
  --bsp-secondary:     #C3935B;
  --bsp-text:          #333333;
  --bsp-muted:         #767676;
  --bsp-border:        #e0dde3;
  --bsp-bg:            #ffffff;
  --bsp-success:       #28a745;
  --bsp-error:         #dc3545;
  --bsp-radius:        3px;
  --bsp-font:          'Lora', Georgia, serif;
  --bsp-shadow:        0 4px 24px rgba(176,128,130,0.16);
}


.bespecta-modal__header h2,
.bespecta-account-extra legend,
.bespecta-dashboard-widget h2,
.bespecta-profile-page h2,
.bespecta-profile-page h3 {
  font-family: 'Marcellus SC', Georgia, serif;
  font-weight: 400;
  letter-spacing: .04em;
}

/* ==========================================================================
   Social Login Buttons — Register Form
   Matches WoodMart's native login-popup button style exactly.
   ========================================================================== */

.bespecta-social-login { margin: 0 0 24px; }

.bespecta-social-login__buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

/* Divider — sits BELOW buttons, ABOVE the email fields */
.bespecta-social-login__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  text-align: center;
}
.bespecta-social-login__divider::before,
.bespecta-social-login__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bsp-border);
}
.bespecta-social-login__divider span {
  font-size: 11px;
  font-weight: 700;
  color: var(--bsp-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-family: var(--bsp-font);
}

/* Social buttons — styled to match WoodMart's .wd-social-login-btn */
.bespecta-social-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--bsp-font);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  border: none;
}
.bespecta-social-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.bespecta-social-btn svg { flex-shrink: 0; }

/* Facebook — matches WoodMart's Facebook button */
.bespecta-social-btn--facebook {
  background: #1877F2;
  color: #fff !important;
}

/* Google — white with subtle border, Google "G" multi-colour icon */
.bespecta-social-btn--google {
  background: #fff;
  color: #444 !important;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Confirm password row */
.bespecta-confirm-password-row { margin-top: 0; }

/* ==========================================================================
   Avatar — Dashboard, Account Details, and Topbar
   ========================================================================== */

/* Dashboard widget avatar */
.bespecta-dashboard-widget__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.bespecta-dashboard-widget__avatar .bespecta-avatar-img,
.bespecta-dashboard-widget__avatar .avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}
.bespecta-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bsp-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--bsp-font);
}

/* Account Details avatar upload widget */
.bespecta-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bespecta-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bsp-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bespecta-avatar-preview .bespecta-avatar-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}
.bespecta-avatar-placeholder {
  font-size: 26px;
  font-weight: 700;
  color: var(--bsp-primary);
  font-family: var(--bsp-font);
}
.bespecta-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bespecta-avatar-upload-btn {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  padding: 6px 14px;
}
.bespecta-avatar-remove-btn {
  font-size: 12px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  color: var(--bsp-error) !important;
  cursor: pointer;
}

/* ==========================================================================
   Profile Completion Modal
   ========================================================================== */

.bespecta-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  font-family: var(--bsp-font);
}
.bespecta-modal.is-open { display: block; }

.bespecta-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 10, 35, 0.55);
  backdrop-filter: blur(3px);
}

.bespecta-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bsp-bg);
  border-radius: 8px;
  padding: 40px;
  width: 90%;
  max-width: 480px;
  box-shadow: var(--bsp-shadow);
  animation: bspModalIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bspModalIn {
  from { opacity:0; transform:translate(-50%,-46%) scale(0.96); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

.bespecta-modal__close {
  position: absolute;
  top: 14px; left: 16px; right: auto;
  background: none; border: none;
  font-size: 22px;
  color: var(--bsp-muted);
  cursor: pointer; line-height:1; padding:4px;
  transition: color 0.15s;
}
.bespecta-modal__close:hover { color: var(--bsp-primary); }

.bespecta-modal__header { text-align:center; margin-bottom:28px; }
.bespecta-modal__icon { font-size:36px; display:block; margin-bottom:12px; }
.bespecta-modal__header h2 {
  font-size:22px; color:var(--bsp-primary);
  margin:0 0 8px; font-family:var(--bsp-font);
}
.bespecta-modal__header p { color:var(--bsp-muted); font-size:14px; margin:0; }

.bespecta-modal__message {
  padding:10px 14px; border-radius:var(--bsp-radius);
  font-size:14px; margin-bottom:16px;
}
.bespecta-modal__message.success { background:#edfaf1; color:#1a6b36; border:1px solid #b6e8c9; }
.bespecta-modal__message.error   { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; }

.bespecta-modal__actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.bespecta-modal__skip    { text-align:center; font-size:13px; }

/* ==========================================================================
   Shared Form Elements
   ========================================================================== */

.bespecta-form-row         { display:flex; gap:16px; }
.bespecta-form-row--half > * { flex:1; }
.bespecta-form-group       { display:flex; flex-direction:column; margin-bottom:18px; }
.bespecta-form-group label { font-size:13px; font-weight:600; color:var(--bsp-text); margin-bottom:6px; }
.bespecta-form-group label .required { color:var(--bsp-primary); }

.bespecta-form-group input,
.bespecta-form-group select,
.bespecta-form-group textarea {
  width:100%; padding:10px 12px;
  border:1px solid var(--bsp-border);
  border-radius:var(--bsp-radius);
  font-size:14px; font-family:var(--bsp-font);
  color:#111111; background:#fff;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box; appearance:auto;
}
.bespecta-form-group input:focus,
.bespecta-form-group select:focus {
  outline:none;
  border-color:var(--bsp-primary);
  box-shadow:0 0 0 3px rgba(176,128,130,.14);
}

.bespecta-form-group input::placeholder,
.bespecta-form-group textarea::placeholder {
  color:#b8b8b8 !important;
  opacity:1;
}
.bespecta-form-group input::-webkit-input-placeholder,
.bespecta-form-group textarea::-webkit-input-placeholder { color:#b8b8b8 !important; }
.bespecta-form-group input::-moz-placeholder,
.bespecta-form-group textarea::-moz-placeholder { color:#b8b8b8 !important; opacity:1; }

.bespecta-form-hint { font-size:12px; color:var(--bsp-muted); margin-top:5px; }

.bespecta-checkbox-label {
  display:flex; align-items:flex-start;
  gap:10px; font-size:13px; color:var(--bsp-muted);
  cursor:pointer; line-height:1.5;
}
.bespecta-checkbox-label input[type="checkbox"] {
  width:16px; height:16px; margin-top:2px;
  flex-shrink:0; accent-color:var(--bsp-primary);
}

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

.bespecta-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:var(--bsp-radius);
  font-size:14px; font-weight:600; font-family:var(--bsp-font);
  letter-spacing:.03em; text-decoration:none !important;
  cursor:pointer; border:2px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .15s,opacity .2s;
  white-space:nowrap;
}
.bespecta-btn:active { transform:translateY(1px); }
.bespecta-btn--primary {
  background:#B08082 !important; color:#ffffff !important;
  border-color:#B08082 !important; width:100%;
}
.bespecta-btn--primary:hover {
  background:#2f2f2f !important; border-color:#2f2f2f !important; color:#ffffff !important;
}
.bespecta-btn--primary:disabled,
.bespecta-btn--primary.is-loading { opacity:.7; cursor:not-allowed; }
.bespecta-btn--ghost {
  background:transparent; color:var(--bsp-muted) !important;
  border-color:var(--bsp-border); width:100%;
}
.bespecta-btn--ghost:hover { color:var(--bsp-primary) !important; border-color:var(--bsp-primary); }

/* ==========================================================================
   Dashboard Widget
   ========================================================================== */

.bespecta-dashboard-widget {
  background:var(--bsp-bg); border:1px solid var(--bsp-border);
  border-radius:8px; padding:24px; margin-bottom:28px;
  font-family:var(--bsp-font);
}
.bespecta-dashboard-widget__welcome {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.bespecta-dashboard-widget__greeting {
  flex:1; display:flex; flex-direction:column; gap:3px;
}
.bespecta-dashboard-widget__name { font-size:16px; color:var(--bsp-text); }
.bespecta-dashboard-widget__member-since { font-size:12px; color:var(--bsp-muted); }

/* Completeness bar */
.bespecta-completeness { margin-bottom:20px; }
.bespecta-completeness__header {
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--bsp-muted); margin-bottom:8px;
}
.bespecta-completeness__header strong { color:var(--bsp-primary); }
.bespecta-completeness__bar {
  height:6px; background:#eee; border-radius:999px; overflow:hidden;
}
.bespecta-completeness__fill {
  height:100%; background:var(--bsp-primary);
  border-radius:999px; transition:width .6s ease;
}
.bespecta-completeness__cta { margin-top:8px; font-size:13px; }
.bespecta-completeness__cta a { color:var(--bsp-primary); text-decoration:none; font-weight:600; }
.bespecta-completeness--complete .bespecta-completeness__badge {
  display:inline-block; background:#edfaf1; color:#1a6b36;
  border-radius:999px; padding:5px 14px; font-size:13px; font-weight:600;
}

/* 4 quick-link tiles */
.bespecta-dashboard-widget__quick-links {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.bespecta-quick-link {
  display:flex; flex-direction:column; align-items:center;
  gap:7px; padding:14px 8px; border:1px solid var(--bsp-border);
  border-radius:6px; text-decoration:none !important;
  font-size:12px; font-weight:600;
  color:var(--bsp-text) !important; text-align:center;
  transition:border-color .2s,color .2s,background .2s;
}
.bespecta-quick-link:hover {
  border-color:var(--bsp-primary);
  color:var(--bsp-primary) !important;
  background:var(--bsp-primary-light);
}
.bespecta-quick-link svg { color:var(--bsp-primary); }

/* ==========================================================================
   Account Details: extra fieldset
   ========================================================================== */

.bespecta-account-extra {
  border:1px solid var(--bsp-border); border-radius:6px;
  padding:20px; margin-top:24px;
}
.bespecta-account-extra legend {
  font-weight:700; color:var(--bsp-primary); padding:0 8px; font-size:14px;
}

/* ==========================================================================
   Checkout notice
   ========================================================================== */

.bespecta-checkout-notice {
  display:flex; align-items:center; gap:10px;
  font-size:14px; margin-bottom:24px;
}
.bespecta-checkout-notice__icon { color:var(--bsp-success); font-size:18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
  .bespecta-form-row--half            { flex-direction:column; gap:0; }
  .bespecta-dashboard-widget__quick-links { grid-template-columns:repeat(2,1fr); }
  .bespecta-modal__dialog             { padding:28px 20px; }
  .bespecta-social-login__buttons     { flex-direction:column; }
  .bespecta-social-btn                { width:100%; }
}