/* ============================================================
   SMART CONTACT CARDS PRO — FRONT CSS (FULL REBUILD v4)
   Text Blocks: Name / Title / Info
   ============================================================ */

/* ===============================
   BASE LAYOUT (الكرت – الشكل العام)
   =============================== */

.scc-card-wrap {
    min-height: 70vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* =============================
   My Account: Card Analytics
   ============================= */
.scc-analytics-wrap{
  max-width: 980px;
  margin: 0 auto;
}
.scc-analytics-filter input,
.scc-analytics-filter select{
  max-width: 100%;
}

/* Card Analytics layout */
.scc-analytics-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.scc-analytics-title h3{
  margin:0;
}
.scc-analytics-sub{
  margin-top:6px;
  opacity:.8;
}
.scc-analytics-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.scc-analytics-actions .scc-btn{
  border-radius:10px;
  padding:10px 14px;
  line-height:1.1;
}
.scc-analytics-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  margin:14px 0 6px;
}
.scc-analytics-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:200px;
}
.scc-analytics-field label{
  font-weight:600;
}
.scc-analytics-field select,
.scc-analytics-field input{
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  max-width:100%;
}
.scc-analytics-apply{
  min-width:auto;
}
.scc-analytics-notice{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#92400e;
}
.scc-analytics-cards{
  margin-top:14px;
}
.scc-analytics-box{
  border:1px solid #eee;
  border-radius:14px;
  padding:14px;
}
.scc-analytics-top-actions{
  margin-top:16px;
}
.scc-analytics-top-head{
  font-weight:800;
  margin-bottom:10px;
}
.scc-analytics-top-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.scc-analytics-top-item{
  border:1px solid #eee;
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.scc-analytics-top-name{
  font-weight:700;
  text-transform:capitalize;
}
.scc-analytics-top-meta{
  opacity:.9;
}
.scc-analytics-top-meta span{
  opacity:.75;
  margin-left:6px;
}
.scc-analytics-section{
  margin-top:18px;
}
.scc-analytics-h4{
  margin:0 0 10px 0;
}
.scc-analytics-muted{
  opacity:.75;
}
.scc-analytics-table{
  border:1px solid #eee;
  border-radius:14px;
  overflow:hidden;
}
.scc-analytics-table table{
  width:100%;
  border-collapse:collapse;
}
.scc-analytics-table thead tr{
  background:#fafafa;
}
.scc-analytics-table th,
.scc-analytics-table td{
  padding:10px 12px;
  border-bottom:1px solid #f1f1f1;
}
.scc-analytics-table th{
  border-bottom:1px solid #eee;
  font-weight:700;
}
.scc-analytics-table th:last-child,
.scc-analytics-table td:last-child{
  text-align:right;
  font-weight:700;
}

/* Small screens */
@media (max-width: 640px){
  .scc-analytics-field{ min-width: 100%; }
  .scc-analytics-actions{ width:100%; }
  .scc-analytics-actions a{ width:100%; text-align:center; }
}


.scc-card {
    max-width:420px;
    width:100%;
    border-radius:22px;
    padding:20px 18px 18px;
    text-align:center;
    position:relative;
    color:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}

/* ===============================
   LOGO + PROFILE PHOTO
   =============================== */

.scc-logo{
    width:120px;
    height:120px;
    margin:8px auto;
    border-radius:50%;
    overflow:hidden;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 10px 25px rgba(0,0,0,.4);
    background: transparent;
    display:block;
}
.scc-logo img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
}
.scc-photo img {
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 10px 25px rgba(0,0,0,.4);
    margin:8px auto;
}

/* ===============================
   TEXT AREAS (الأساس قبل الثيمات)
   =============================== */

.scc-names h2 {
    margin:4px 0;
    font-weight:700;
    text-shadow:0 2px 4px rgba(0,0,0,.7);
}

.scc-names .ar {
    direction:rtl;
}

.scc-titles,
.scc-company,
.scc-address {
    margin:3px 0;
    font-size:13px;
    color:#d8e3ff;
}

.scc-titles .ar,
.scc-company .ar,
.scc-address .ar {
    direction:rtl;
}

.scc-empid {
    margin:3px 0 5px;
    font-size:12px;
    color:#ffe79d;
}

/* ============================================================
   TEXT BLOCKS CONTROL (Name / Title / Info)
   ============================================================ */

/* Name Block (الاسم – عربي وإنجليزي) */
[class*="theme-"] .scc-names h2,
[class*="theme-"] .scc-names .ar {
    font-size: var(--name-size, 26px);
    color: var(--name-color, var(--text-color, #ffffff));
    font-weight: var(--name-weight, 700);
    text-shadow: var(--name-shadow, 0 2px 4px rgba(0,0,0,.6));
}

/* محاذاة بلوك الاسم */
[class*="theme-"] .scc-names {
    text-align: var(--name-align, center);
}

/* Job Title Block (المسمى الوظيفي) */
[class*="theme-"] .scc-titles {
    font-size: var(--title-size, 15px);
    color: var(--title-color, var(--text-color, #dce3ff));
    font-weight: var(--title-weight, 600);
    text-align: var(--title-align, center);
}

/* Info Block (اسم الشركة + العنوان + رقم الموظف) */
[class*="theme-"] .scc-company,
[class*="theme-"] .scc-address,
[class*="theme-"] .scc-empid {
    font-size: var(--info-size, 13px);
    color: var(--info-color, #c7d5ff);
    font-weight: var(--info-weight, 400);
    line-height: var(--info-line-height, 1.4);
    text-align: var(--info-align, center);
}

/* ===============================
   ACTIONS BOX
   =============================== */

.scc-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin:14px 0;
}

.scc-actions .btn {
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 6px 12px rgba(0,0,0,.25);
    background-size:24px 24px !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    image-rendering:-webkit-optimize-contrast;
    transition:transform .12s ease, filter .12s ease;
}

.scc-actions .btn:hover {
    transform:translateY(-2px);
    filter:brightness(1.18);
}

/* ICONS */
.scc-actions .btn.phone    { background-image:url('icons/phone.png'); }
.scc-actions .btn.whatsapp { background-image:url('icons/whatsapp.png'); }
.scc-actions .btn.email    { background-image:url('icons/email.png'); }
.scc-actions .btn.maps     { background-image:url('icons/maps.png'); }
.scc-actions .btn.website  { background-image:url('icons/website.png'); }

/* ===============================
   SAVE BUTTON
   =============================== */

.scc-save {
    margin-top:8px;
}

.scc-save .save-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border-radius:14px;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(0,0,0,.3);
}

/* SAVE ICON */
.scc-save .save-btn::before {
    content:"";
    display:inline-block;
    background-image:url('icons/save-contact.png');
    background-size:contain;
    background-repeat:no-repeat;
    width: var(--save-icon-size, 38px);
    height: var(--save-icon-size, 38px);
}

/* ===============================
   QR CODE INLINE
   =============================== */

.scc-qr-inline {
    margin-top:14px;
    display:flex;
    justify-content:center;
}

.scc-qr-inline img,
.scc-qr-inline canvas,
.scc-qr-inline svg {
    border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* ===============================
   POPUP (DESKTOP)
   =============================== */

.scc-popup {
    display:none;
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.45);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.scc-popup-box {
    background:#fff;
    color:#000;
    padding:18px 14px;
    border-radius:12px;
    max-width:320px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.4);
    font-size:14px;
}

.scc-popup-box button {
    margin-top:10px;
    padding:6px 14px;
    border-radius:8px;
    border:none;
    background:#0d3b78;
    color:#fff;
    font-weight:600;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width:480px){
    .scc-card { max-width:360px; }
}

/* ============================================================
   ===================== THEME SYSTEM V3 =======================
   ============================================================ */

/* VARIABLES USED BY ALL THEMES */
:root {
    --card-radius: 22px;
    --button-size: 42px;
    --icon-size: 26px;
    --save-icon-size: 38px;
}

/* APPLY VARIABLES TO ELEMENTS */
[class*="theme-"] {
    background: var(--bg) !important;
}

[class*="theme-"] .scc-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius);
}

/* أزرار التواصل */
[class*="theme-"] .scc-actions .btn {
    /* مهم: نستخدم background-color فقط حتى لا نحذف الـ background-image */
    background-color: var(--btn-bg) !important;
    border: var(--btn-border) !important;
    box-shadow: var(--btn-shadow) !important;
}

/* زر الحفظ */
[class*="theme-"] .scc-save .save-btn {
    background: var(--save-bg) !important;
    color: var(--save-text) !important;
}

/* ============================================================
   ==================== THEMES DEFINITIONS =====================
   ============================================================ */

/* 1) ALKASURI BRAND */
.theme-alkasuri {
    --bg: #eaf0ff;
    --card-bg: linear-gradient(145deg,#0d3b78,#071b3a);
    --text-color:#E7FAFF;

    --btn-bg: rgba(255,255,255,0.18);
    --btn-border: 1px solid rgba(255,255,255,0.35);
    --btn-shadow: 0 6px 16px rgba(0,0,0,.4);

    --save-bg: linear-gradient(135deg,#f3c869,#e2b54c);
    --save-text: #10234d;

    /* Name / Title / Info defaults ويمكنك تعديلها لكل ثيم */
    --name-size: 26px;
    --name-color: #ffffff;
    --title-size: 15px;
    --title-color: #dce8ff;
    --info-size: 13px;
    --info-color: #c7d5ff;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}

/* 2) ROYAL BLUE */
.theme-royal {
    --bg:#00163a;
    --card-bg:linear-gradient(160deg,#0b2e72,#003c8f);
    --text-color:#ffffff;

    --btn-bg:rgba(255,255,255,0.14);

    --save-bg:linear-gradient(135deg,#0d47a1,#002f6c);
    --save-text:#ffffff;

    --name-size: 26px;
    --name-color: #ffffff;
    --title-size: 15px;
    --title-color: #e2ebff;
    --info-size: 13px;
    --info-color: #c8d5ff;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}

/* 3) SKY BLUE */
.theme-sky {
    --bg:#dbeeff;
    --card-bg:#2f89c5;
    --text-color:#ffffff;

    --btn-bg:rgba(255,255,255,0.18);

    --save-bg:#2f89c5;
    --save-text:#ffffff;

    --name-size: 26px;
    --name-color: #ffffff;
    --title-size: 15px;
    --title-color: #e7f2ff;
    --info-size: 13px;
    --info-color: #e0edff;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}

/* 4) EMERALD GREEN */
.theme-emerald {
    --bg:#023b34;
    --card-bg:#045348;
    --text-color:#ffffff;

    --btn-bg:rgba(255,255,255,0.18);

    --save-bg:#04765f;
    --save-text:#ffffff;

    --name-size: 26px;
    --name-color: #ffffff;
    --title-size: 15px;
    --title-color: #e7fff5;
    --info-size: 13px;
    --info-color: #c8f5e4;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}

/* 5) BLACK & GOLD */
.theme-dark {
    --bg:#050507;
    --card-bg:radial-gradient(circle at top,#2b2b2f,#050507);
    --text-color:#ffffff;

    --btn-bg:rgba(212,175,55,0.18);
    --btn-border:2px solid #d4af37;
    --btn-shadow:0 10px 22px rgba(0,0,0,.75);

    --save-bg:linear-gradient(135deg,#f6dd86,#d4af37);
    --save-text:#111;

    --name-size: 26px;
    --name-color: #ffffff;
    --title-size: 15px;
    --title-color: #f6e7b0;
    --info-size: 13px;
    --info-color: #e8d89a;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}

/* 6) ICE WHITE & BLUE */
.theme-white {
    --bg:#e9f2ff;
    --card-bg:#ffffff;
    --text-color:#0d3b78;

    --btn-bg:#0b3c80;

    --save-bg:linear-gradient(135deg,#0f4c9a,#0b3c80);
    --save-text:#ffffff;

    --name-size: 26px;
    --name-color: #0d3b78;
    --title-size: 15px;
    --title-color: #345794;
    --info-size: 13px;
    --info-color: #4b6699;
    --name-align: center;
    --title-align: center;
    --info-align: center;
}


/* QR box background + theme control */
[data-scc-qr]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius:14px;
  background: var(--qr-bg, #ffffff);
}
[data-scc-qr] canvas{
  border-radius:10px;
}


/* ============================================================
   ACTIONS LAYOUT OVERRIDE (5 per row + centered last row)
   ============================================================ */
.scc-card .scc-actions,
.scc-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;

  /* 5 icons per row: (44*5) + (12*4) = 268px */
  max-width: calc(5 * 44px + 4 * 12px) !important;
  width: 100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.scc-card .scc-actions .btn,
.scc-actions .btn{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  background-size:24px 24px !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Social icons (PNG in assets/icons) */
.scc-actions .btn.instagram { background-image:url('icons/instagram.png') !important; }
.scc-actions .btn.tiktok    { background-image:url('icons/tiktok.png') !important; }
.scc-actions .btn.snapchat  { background-image:url('icons/snapchat.png') !important; }
.scc-actions .btn.facebook  { background-image:url('icons/facebook.png') !important; }

/* Responsive: reduce columns on very small screens */
@media (max-width: 420px){
  .scc-card .scc-actions,
  .scc-actions{
    max-width: calc(3 * 44px + 2 * 12px) !important; /* 3 per row */
  }
}



/* ===== Strong mobile override inside plugin (replaces Additional CSS) ===== */
@media (max-width: 768px){
  body .scc-actions,
  body .scc-card .scc-actions,
  body .scc-theme-card .scc-actions,
  body .scc-preview .scc-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: calc(5 * 44px + 4 * 12px) !important;
    margin: 0 auto !important;

    white-space: normal !important;
    overflow: visible !important;
  }

  body .scc-actions .btn,
  body .scc-card .scc-actions .btn,
  body .scc-theme-card .scc-actions .btn,
  body .scc-preview .scc-actions .btn{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
}
/* ===== End strong mobile override ===== */


/* ============================================================
   OVERRIDE (PLUGIN) — Mobile wrap + social icons (LinkedIn & X)
   This block is intentionally at the END to win against theme CSS.
   ============================================================ */

/* Social icons background (same pattern as existing icons folder) */
.scc-actions .btn.instagram{ background-image:url('icons/instagram.png') !important; }
.scc-actions .btn.tiktok{ background-image:url('icons/tiktok.png') !important; }
.scc-actions .btn.snapchat{ background-image:url('icons/snapchat.png') !important; }
.scc-actions .btn.facebook{ background-image:url('icons/facebook.png') !important; }
.scc-actions .btn.linkedin{ background-image:url('icons/linkedin.png') !important; }
.scc-actions .btn.x{ background-image:url('icons/x.png') !important; }

/* Ensure icon images are visible and sized consistently */
.scc-actions .btn{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:22px 22px !important;
}

/* Mobile: force wrap + center rows (same as Additional CSS that worked) */
@media (max-width: 768px){
  body .scc-actions,
  body .scc-card .scc-actions,
  body .scc-theme-card .scc-actions,
  body .scc-preview .scc-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;

    width:100% !important;
    max-width: calc(5 * 44px + 4 * 12px) !important;
    margin: 0 auto !important;

    white-space:normal !important;
    overflow:visible !important;
  }

  body .scc-actions .btn,
  body .scc-card .scc-actions .btn,
  body .scc-theme-card .scc-actions .btn,
  body .scc-preview .scc-actions .btn{
    width:44px !important;
    height:44px !important;
    flex: 0 0 44px !important;
  }
}

/* =========================
   SCC Analytics - Mobile polish
   ========================= */
@media (max-width: 768px) {

  /* 1) زرّين Back + Export (stack + gap) */
  .scc-analytics-header-actions,
  .scc-analytics-actions,
  .scc-analytics-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
  }

  /* اجعل الأزرار بعرض كامل ومسافة داخلية مريحة */
  .scc-analytics-header-actions .button,
  .scc-analytics-actions .button,
  .scc-analytics-buttons .button,
  .scc-analytics-header-actions a,
  .scc-analytics-actions a {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  /* 2) صف الفلتر (Period + Select + Apply) */
  .scc-analytics-filter,
  .scc-analytics-period,
  .scc-analytics-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .scc-analytics-filter label {
    margin-bottom: 2px !important;
  }

  .scc-analytics-filter select,
  .scc-analytics-filter input[type="date"] {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* 3) Top Actions في الموبايل (Grid مرتب + مسافات) */
  .scc-top-actions,
  .scc-analytics-top-actions,
  .scc-analytics-top-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* لو كانت top action items عبارة عن chips */
  .scc-top-actions .scc-chip,
  .scc-analytics-top-actions .scc-chip,
  .scc-analytics-top-actions-grid .scc-chip,
  .scc-top-actions .scc-top-action-item,
  .scc-analytics-top-actions .scc-top-action-item {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* 4) جدول Clicks: امنع التكسير على الموبايل */
  .scc-analytics-table,
  .scc-analytics table {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
}


/* =========================
   Analytics Export Block
   ========================= */
.scc-export-block{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
}
.scc-export-block-title{
  font-weight: 700;
  margin-bottom: 10px;
}
.scc-export-block-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.scc-export-block-actions .scc-export-btn{
  flex: 1 1 220px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding: 12px 14px;
  border-radius: 12px;
}

@media (max-width: 768px){
  .scc-export-block-actions{
    flex-direction: column;
  }
  .scc-export-block-actions .scc-export-btn{
    width:100%;
  }
}

/* ============================================================
   Export Reports block – responsive button tuning (added)
   ============================================================ */

/* SCC Analytics – Export block button sizing (mobile/tablet)
   Put this at the VERY END of assets/front.css
*/

/* Base reset (covers most cases) */
.scc-export-block .button,
.scc-export-block a,
.scc-export-block button,
.scc-export-block .scc-export-btn,
.scc-export-actions .button,
.scc-export-actions a,
.scc-export-actions button {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Tablet: slightly smaller */
@media (max-width: 1024px) {
  .scc-export-block .button,
  .scc-export-block a,
  .scc-export-block button,
  .scc-export-block .scc-export-btn,
  .scc-export-actions .button,
  .scc-export-actions a,
  .scc-export-actions button {
    padding: 12px 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
}

/* Mobile: compact */
@media (max-width: 600px) {
  .scc-export-block .button,
  .scc-export-block a,
  .scc-export-block button,
  .scc-export-block .scc-export-btn,
  .scc-export-actions .button,
  .scc-export-actions a,
  .scc-export-actions button {
    padding: 11px 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
}


/* ===============================
   Autocomplete (My Cards search)
   =============================== */
.scc-autocomplete-wrap{ position:relative; }
.scc-autocomplete-list{
    position:absolute;
    left:0; right:0;
    top:100%;
    margin-top:6px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    z-index:9999;
    max-height:320px;
    overflow:auto;
    display:none;
}
.scc-autocomplete-list.is-open{ display:block; }
.scc-autocomplete-item{
    padding:10px 12px;
    cursor:pointer;
    font-size:13px;
    line-height:1.3;
    border-bottom:1px solid #f1f1f1;
}
.scc-autocomplete-item:last-child{ border-bottom:none; }
.scc-autocomplete-item:hover{ background:#f6f8ff; }
.scc-autocomplete-muted{ opacity:.7; font-size:12px; margin-top:2px; }