/* Phone/Laptop icon */
/*
.half-laptop::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='2' y='3' width='12' height='8' rx='1' ry='1' stroke='black' stroke-width='1' fill='none'/><rect x='1' y='11' width='14' height='2' fill='black'/></svg>");
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.half-phone::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='4' y='1' width='8' height='14' rx='2' ry='2' stroke='black' stroke-width='1' fill='none'/><circle cx='8' cy='13' r='1' fill='black'/></svg>");
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.swiffle-main-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'><rect x='0' y='0' width='64' height='64' rx='12' fill='%23f0f0f0'/><g transform='translate(64,0) scale(-1,1)'><ellipse cx='32' cy='58' rx='10' ry='3' fill='%230057b7' opacity='0.2'/><rect x='10' y='14' width='28' height='36' rx='4' fill='%23ffffff' stroke='%230057b7' stroke-width='2'/><line x1='14' y1='36' x2='30' y2='36' stroke='%230057b7' stroke-width='2'/><line x1='14' y1='42' x2='24' y2='42' stroke='%230057b7' stroke-width='2'/><rect x='16' y='10' width='28' height='36' rx='4' fill='%23ffffff' stroke='%230057b7' stroke-width='2' transform='rotate(20 32 62)'/><g transform='scale(1,-1) translate(-2,-68)'><path d='M22 48 C30 52, 44 40, 46 28' fill='none' stroke='%230057b7' stroke-width='2' marker-end='url(%23arrowhead)'/></g></g><defs><marker id='arrowhead' markerWidth='6' markerHeight='6' refX='3' refY='2.5' orient='auto'><polygon points='0 0, 6 2.5, 0 5' fill='%230057b7'/></marker></defs></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
*/
/* ═══════════════════════════════════════════════════════
   Swiffle — Elementor editor styles
   ═══════════════════════════════════════════════════════ */

/* ── Device tab switcher ────────────────────────────────
   Hides the default CHOOSE control chrome and renders
   a clean 💻 / 📱 tab bar at the top of each dual section.
   ──────────────────────────────────────────────────────── */

/* Wrapper */
.elementor-control.swiffle-device-tabs {
    background: #f0f2f5;
    border-radius: 8px;
    padding: 4px !important;
    margin-bottom: 12px !important;
}

/* Hide the native label row (it's empty anyway) */
.elementor-control.swiffle-device-tabs .elementor-control-title {
    display: none !important;
}

/* The two-button row */
.elementor-control.swiffle-device-tabs .elementor-choices {
    display: flex !important;
    gap: 4px;
    width: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Each button */
.elementor-control.swiffle-device-tabs .elementor-choices label {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.elementor-control.swiffle-device-tabs .elementor-choices label i {
    font-size: 15px;
}

/* Active / checked state */
.elementor-control.swiffle-device-tabs .elementor-choices input:checked + label {
    background: #ffffff;
    color: #6c3dab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    font-weight: 600;
}

/* Hover on inactive */
.elementor-control.swiffle-device-tabs .elementor-choices label:hover {
    background: rgba(255,255,255,0.6);
    color: #374151;
}

/* Hide the native radio inputs */
.elementor-control.swiffle-device-tabs .elementor-choices input[type="radio"] {
    display: none !important;
}


/* ── Device-conditional controls ───────────────────────
   Adds a subtle left border so the user knows which
   controls belong to the active device.
   ──────────────────────────────────────────────────────── */

/* Controls that are device-specific get a faint indicator */
.elementor-panel .elementor-control[class*="elementor-control-cardwidth"],
.elementor-panel .elementor-control[class*="elementor-control-cardheight"],
.elementor-panel .elementor-control[class*="elementor-control-cardgap"],
.elementor-panel .elementor-control[class*="elementor-control-card"],
.elementor-panel .elementor-control[class*="elementor-control-block"],
.elementor-panel .elementor-control[class*="elementor-control-minicart"] {
    border-left: 3px solid transparent;
    padding-left: 10px !important;
    transition: border-color 0.2s;
}


/* ── Swiffle main icon ──────────────────────────────────── */
.swiffle-main-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='0' y='0' width='64' height='64' rx='12' fill='%23f0f0f0'/><g transform='translate(64,0) scale(-1,1)'><ellipse cx='32' cy='58' rx='10' ry='3' fill='%230057b7' opacity='0.2'/><rect x='10' y='14' width='28' height='36' rx='4' fill='%23ffffff' stroke='%230057b7' stroke-width='2'/><rect x='16' y='10' width='28' height='36' rx='4' fill='%23ffffff' stroke='%230057b7' stroke-width='2' transform='rotate(20 32 62)'/><g transform='translate(24,32)'><circle cx='0' cy='0' r='3' fill='%230057b7'/><line x1='0' y1='0' x2='10' y2='0' stroke='%230057b7' stroke-width='1.5'/><line x1='0' y1='0' x2='-7' y2='-5' stroke='%230057b7' stroke-width='1.5'/><line x1='0' y1='0' x2='-5' y2='6' stroke='%230057b7' stroke-width='1.5'/><line x1='0' y1='0' x2='-2' y2='-9' stroke='%230057b7' stroke-width='1.5'/><circle cx='10' cy='0' r='2.4' fill='%230057b7'/><circle cx='-7' cy='-5' r='2' fill='%230057b7'/><circle cx='-5' cy='6' r='2.2' fill='%230057b7'/><circle cx='-2' cy='-9' r='1.8' fill='%230057b7'/></g><g transform='scale(1,-1) translate(-2,-68)'><path d='M22 48 C30 52, 44 40, 46 28' fill='none' stroke='%230057b7' stroke-width='2'/><polygon points='44,26 50,28 44,30' fill='%230057b7'/></g></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Legacy half-laptop / half-phone icons ──────────────
   Kept for backward compat but no longer used in labels.
   ──────────────────────────────────────────────────────── */
.half-laptop::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='2' y='3' width='12' height='8' rx='1' ry='1' stroke='black' stroke-width='1' fill='none'/><rect x='1' y='11' width='14' height='2' fill='black'/></svg>");
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.half-phone::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='4' y='1' width='8' height='14' rx='2' ry='2' stroke='black' stroke-width='1' fill='none'/><circle cx='8' cy='13' r='1' fill='black'/></svg>");
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

/* Subtitles in left panel */
.swiffle-subsection {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 10px 0 4px;
    letter-spacing: 0.5px;
}