/* ============================================================
   Smart Affiliate Manager — Culinartica Public Styles v1.1
   ============================================================ */

/* ---- Variables ---- */
:root {
  --sam-primary:      #e8404a;
  --sam-primary-dark: #c92d37;
  --sam-success:      #2e7d52;
  --sam-warning:      #b45309;
  --sam-error:        #b91c1c;
  --sam-info:         #1e4e8c;
  --sam-bg-light:     #fff5f6;
  --sam-border:       #f1c7ca;
  --sam-text:         #2c2416;
  --sam-text-muted:   #7a6a5a;
  --sam-radius:       10px;
  --sam-shadow:       0 2px 12px rgba(44,36,22,0.08);
}

/* ============================================================ */
/* Portal wrapper                                                */
/* ============================================================ */
.sam-portal {
  font-family: inherit;
  color: var(--sam-text);
  direction: rtl;
  text-align: right;
  max-width: 960px;
}

.sam-portal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--sam-border);
}
.sam-portal-header h2 {
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--sam-text);
}
.sam-portal-subhead {
  margin: 0;
  color: var(--sam-text-muted);
  font-size: 14px;
}

/* Tier Badges */
.sam-tier-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sam-tier-badge--bronze { background: #f5e6d3; color: #7c4a1a; border: 1px solid #d4a070; }
.sam-tier-badge--silver { background: #e8eaed; color: #3a4450; border: 1px solid #9aa5b4; }
.sam-tier-badge--gold   { background: #fef3cd; color: #7a5000; border: 1px solid #d4a017; }

/* ---- KPI ---- */
.sam-portal-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.sam-portal-kpi-card {
  background: #fff;
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
  padding: 18px 16px;
  text-align: center;
  box-shadow: var(--sam-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sam-portal-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(44,36,22,0.12); }
.sam-portal-kpi-card--approved { border-color: #9fdfbe; }
.sam-portal-kpi-card--paid     { border-color: #93c5fd; }
.sam-portal-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--sam-text);
  margin-bottom: 4px;
}
.sam-portal-kpi-label {
  font-size: 11px;
  color: var(--sam-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Sections ---- */
.sam-portal-section { margin-bottom: 40px; }
.sam-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sam-text);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sam-border);
}

/* ============================================================ */
/* Marketing Links Grid                                          */
/* ============================================================ */
.sam-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.sam-link-card {
  background: #fff;
  border: 1px solid var(--sam-border);
  border-radius: var(--sam-radius);
  padding: 18px 16px;
  box-shadow: var(--sam-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s;
}
.sam-link-card:hover { box-shadow: 0 4px 18px rgba(44,36,22,0.12); }
.sam-link-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.sam-link-name { font-size: 15px; font-weight: 700; color: var(--sam-text); }
.sam-link-category {
  display: inline-block;
  margin-top: 4px;
  background: #f5e6d3;
  color: var(--sam-primary-dark);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.sam-link-desc { font-size: 13px; color: var(--sam-text-muted); margin: 0; }
.sam-link-url-row { display: flex; gap: 6px; align-items: center; }
.sam-link-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--sam-border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--sam-bg-light);
  direction: ltr;
  text-align: left;
  color: var(--sam-text-muted);
  min-width: 0;
}
.sam-copy-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--sam-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
}
.sam-copy-btn:hover { background: var(--sam-primary-dark); }
.sam-copy-btn--success { background: var(--sam-success) !important; }
.sam-link-preview {
  font-size: 12px;
  color: var(--sam-primary);
  text-decoration: none;
}
.sam-link-preview:hover { text-decoration: underline; }

/* ---- Referral link ---- */
.sam-ref-link-box { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sam-ref-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--sam-border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--sam-bg-light);
  direction: ltr;
  text-align: left;
}
.sam-qr-wrap { margin-top: 12px; }
.sam-qr-wrap img { border: 1px solid var(--sam-border); border-radius: 6px; padding: 4px; }

/* ---- Table ---- */
.sam-portal-table-wrap { overflow-x: auto; }
.sam-portal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sam-portal-table th,
.sam-portal-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid #f2ece6; }
.sam-portal-table thead th { background: var(--sam-bg-light); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sam-text-muted); }
.sam-portal-table tbody tr:hover { background: #fff5f6; }

/* ---- Badges ---- */
.sam-badge-sm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f0ece8;
  color: #6a5a4a;
}
.sam-badge-sm--success { background: #d4f0e2; color: #1a6640; }
.sam-badge-sm--info    { background: #d4e6f8; color: #1040a0; }
.sam-badge-sm--warning { background: #fde9c0; color: #865200; }
.sam-badge-sm--danger  { background: #fdd8d8; color: #8b1010; }
.sam-badge-sm--muted   { background: #f0ece8; color: #6a5a4a; }

/* ============================================================ */
/* Registration Form                                             */
/* ============================================================ */
.sam-register-wrap {
  max-width: 580px;
  direction: rtl;
  text-align: right;
}
.sam-register-header {
  margin-bottom: 28px;
}
.sam-register-header h2 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--sam-text);
}
.sam-register-header p {
  color: var(--sam-text-muted);
  margin: 0;
}

.sam-register-form, .sam-form { display: flex; flex-direction: column; gap: 0; }
.sam-field-group { margin-bottom: 20px; }
.sam-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--sam-text);
}
.sam-required { color: var(--sam-error); margin-right: 2px; }
.sam-optional { font-weight: 400; color: var(--sam-text-muted); font-size: 12px; }

.sam-input,
.sam-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sam-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sam-text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.sam-input:focus,
.sam-textarea:focus {
  outline: none;
  border-color: var(--sam-primary);
  box-shadow: 0 0 0 3px rgba(200,112,58,0.15);
}
.sam-textarea { resize: vertical; min-height: 100px; }

.sam-radio-group { display: flex; gap: 24px; align-items: center; margin-top: 4px; }
.sam-radio-label { display: flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.sam-radio-label input[type="radio"] { width: 16px; height: 16px; accent-color: var(--sam-primary); }

.sam-submit-group { margin-top: 8px; }
.sam-btn-primary {
  display: inline-block;
  padding: 13px 36px;
  background: var(--sam-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}
.sam-btn-primary:hover { background: var(--sam-primary-dark); }
.sam-btn-primary:active { transform: scale(0.98); }
.sam-btn-sm { padding: 8px 20px; font-size: 14px; }
.sam-btn-lg { width: 100%; text-align: center; }

.sam-form-hint {
  font-size: 12px;
  color: var(--sam-text-muted);
  margin-top: 10px;
}
.sam-form-hint a { color: var(--sam-primary); }

/* ---- Success screen ---- */
.sam-register-success {
  text-align: center;
  padding: 40px 20px;
  background: #f0fdf6;
  border: 1px solid #9fdfbe;
  border-radius: var(--sam-radius);
}
.sam-success-icon {
  font-size: 48px;
  color: var(--sam-success);
  margin-bottom: 12px;
}
.sam-register-success h3 { font-size: 20px; color: var(--sam-success); margin: 0 0 8px; }
.sam-register-success p  { color: var(--sam-text-muted); margin: 0; }

/* ---- Notices ---- */
.sam-form-notice, .sam-portal-notice {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
  border-right: 4px solid #ccc;
  background: #f7f7f7;
}
.sam-form-notice--success { background: #f0fdf6; border-color: var(--sam-success); color: #1a5a38; }
.sam-form-notice--warning { background: #fffbeb; border-color: #d97706; color: #7a4800; }
.sam-form-notice--error   { background: #fef2f2; border-color: var(--sam-error); color: #7f1d1d; }
.sam-form-notice--info    { background: #eff6ff; border-color: #3b82f6; color: #1e3a6e; }

.sam-desc { font-size: 13px; color: var(--sam-text-muted); margin-top: 6px; }
.sam-muted { color: var(--sam-text-muted); }

/* ============================================================ */
/* Responsive                                                    */
/* ============================================================ */
@media (max-width: 640px) {
  .sam-portal-kpi     { grid-template-columns: repeat(2, 1fr); }
  .sam-links-grid     { grid-template-columns: 1fr; }
  .sam-ref-link-box   { flex-direction: column; }
  .sam-ref-input      { width: 100%; }
  .sam-portal-header  { flex-direction: column; }
  .sam-link-url-row   { flex-wrap: wrap; }
}

/* ============================================================ */
/* Withdrawal Form                                               */
/* ============================================================ */
.sam-withdrawal-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--sam-bg-light);
  border: 1px solid var(--sam-border);
  border-radius: 8px;
}
.sam-withdrawal-balance-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--sam-success);
}
.sam-withdrawal-form { margin-top: 12px; }
.sam-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sam-field-row .sam-field-group { min-width: 140px; }


/* Stage 2 portal tabs */
.sam-portal-tabs {
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px;
}
.sam-tab-btn {
  border:1px solid var(--sam-border); background:#fff; color:var(--sam-text);
  border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer;
  transition:all .15s ease;
}
.sam-tab-btn:hover { border-color: var(--sam-primary); color: var(--sam-primary); }
.sam-tab-btn.is-active { background: var(--sam-primary); border-color: var(--sam-primary); color:#fff; }
.sam-tab-panel { display:none; }
.sam-tab-panel.is-active { display:block; }
.sam-details-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px;
}
.sam-detail-card {
  background:#fff; border:1px solid var(--sam-border); border-radius:12px; padding:16px; box-shadow: var(--sam-shadow);
}
.sam-detail-label { display:block; color:var(--sam-text-muted); font-size:12px; margin-bottom:6px; }
.sam-detail-card strong { color: var(--sam-text); font-size:16px; }
.sam-info-boxes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.sam-info-box { background:var(--sam-bg-light); border:1px solid var(--sam-border); border-radius:12px; padding:16px; }
.sam-info-box h4 { margin:0 0 8px; font-size:14px; }
.sam-info-box p { margin:0; color:var(--sam-text-muted); line-height:1.6; }
@media (max-width: 640px){ .sam-tab-btn { width:100%; text-align:center; } }