/* =========================================================
  🧩 ROOT
========================================================= */
:root { 
  --modal-transition-duration:350ms; 
  --overlay-transition-duration:300ms; 
  --overlay-color:rgba(10,10,12,0.8); 
  --overlay-max-opacity:0.9; 
  --modal-blur:6px; 
  --modal-bg:var(--basic-color-white);
  --modal-close-bg:var(--color-black-100);
  --modal-close-bg-hover:var(--color-black-200);

@media(min-width:1px)and(max-width:640px) { 
  --modal-padding:calc(var(--small-box-padding)*1.0); 
}

@media(min-width:641px) { 
  --modal-padding:calc(var(--small-box-padding)*1.5); }
  --modal-radius-desktop:var(--small-box-br); 
  --modal-radius-mobile:var(--small-box-br); 
  --modal-margin-desktop:var(--space-24); 
  --modal-desktop-max-height:95vh; 
  --modal-mobile-collapsed-height:36vh; 
  --modal-mobile-mid-height:68vh; 
  --modal-mobile-max-height:85vh; 
  --modal-shadow:var(--section-box-shadow); 
}

/* =========================================================
  🧩 THEMES
========================================================= */
.modal[data-theme="light"] { --modal-bg:var(--basic-color-white); --modal-fg:var(--basic-color-black); }
.modal[data-theme="black"] { --modal-bg:var(--basic-color-black); --modal-fg:var(--basic-color-white); }
.modal[data-theme="light"] .modal-close,
.modal[data-theme="black"] .modal-close { background:var(--modal-close-bg) /*#E2E5E9*/; fill:var(--basic-color-black); color:var(--basic-color-black); cursor:pointer; box-shadow:var(--shadow-box); }
.modal[data-theme="light"] .modal-close.btn:hover,
.modal[data-theme="black"] .modal-close.btn:hover { background:var(--modal-close-bg-hover); transform: translateY(-2px); box-shadow:var(--shadow-box-hover) }

.modal[data-theme="light"] .modal-body::-webkit-scrollbar-thumb,
.modal[data-theme="black"] .modal-body::-webkit-scrollbar-thumb { background:#E2E5E9; }
.modal[data-theme="light"] .modal-body,
.modal[data-theme="black"] .modal-body { scrollbar-color:#E2E5E9 transparent; }

/* =========================================================
  🧩 OVERLAY
========================================================= */
.modal-overlay { position:fixed; inset:0; display:none; justify-content:center; z-index:1100; opacity:0; pointer-events:none; background:transparent; -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); transition:opacity var(--overlay-transition-duration) ease,background var(--overlay-transition-duration) ease,-webkit-backdrop-filter var(--overlay-transition-duration) ease,backdrop-filter var(--overlay-transition-duration) ease; }
.modal-overlay.active { display:flex; opacity:1; pointer-events:auto; background:var(--overlay-color); -webkit-backdrop-filter:blur(var(--modal-blur)); backdrop-filter:blur(var(--modal-blur)); }

/* Modal main structure */
.modal { border-radius:var(--modal-radius-desktop); box-shadow:var(--modal-shadow); transform:translateY(110%); opacity:0; transition:transform var(--modal-transition-duration) cubic-bezier(.2,.9,.3,1),opacity var(--modal-transition-duration) ease; will-change:transform,opacity; margin:0 var(--modal-margin-desktop); max-height:var(--modal-desktop-max-height); display:none; flex-direction:column; overflow:hidden; background:var(--modal-bg); color:var(--modal-fg); }
.modal::before { content:""; position:absolute; inset:0; width:120%; height:100%; border-radius:75%; background:var(--bg-special2); filter:blur(60px); opacity:.5; left:50%; top:5%; bottom:5%; transform:translateX(-50%); z-index:0; pointer-events:none; }
.modal.open { display:flex; transform:translateY(0); opacity:1; }
.modal .modal-container { display:flex; flex-direction:column; padding:var(--modal-padding); position:relative; gap:var(--small-box-gap); overflow:auto; }
.modal .modal-container { padding-left: var(--small-box-padding); padding-right: var(--small-box-padding); padding-top: var(--small-box-padding); }

.modal .modal-header { position:sticky; top:0; z-index:2; padding:0; display:flex; align-items:center; justify-content:space-between; }
.modal .modal-title { margin:0; }

/* close button - light version */
.modal-close { cursor:pointer; box-shadow:var(--small-box-shadow); }
.modal-close.btn { cursor:pointer; width:32px!important; height:32px!important; }


/* =========================================================
  🧩 CONTENT AREA
========================================================= */
.modal-body { /* padding:16px; */ overflow-y:scroll; -webkit-overflow-scrolling:touch; flex:1 1 auto; scrollbar-width:thin; }
.modal-body::-webkit-scrollbar { width:12px; }
.modal-body::-webkit-scrollbar-track { background:transparent; }
.modal-body::-webkit-scrollbar-thumb { border-radius:8px; border:3px solid transparent; background-clip:padding-box; }

/* Footer */
.modal-footer { position:sticky; bottom:0; z-index:2; padding:var(--small-box-padding) auto; border-top:0 solid var(--color-black-700); display:flex; gap:var(--elements-gap); justify-content:flex-end; }

.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* =========================================================
  🧩 GENERAL - CONTENT INSIDE MODAL
========================================================= */
.modal .modal-container .block { display:flex; gap:var(--small-box-gap); flex-direction:column; }
.modal .modal-container .block-header,
.modal .modal-container .block-content { display:flex; gap:calc(var(--elements-gap)/2); flex-direction:column; }

.multiple-col { display:flex; flex-direction:row; gap:var(--section-gap); width:100%; }
.multiple-col .col-left { width:60%; }
.multiple-col .col-right { width:40%; text-align:left; }
.multiple-col .col-right .block-content { gap:var(--elements-gap); }
.multiple-col .col-right .block-content .book-meeting { display:flex; flex-direction:column; text-align:center; gap:var(--elements-gap); }
.multiple-col .col-right .block-content .book-meeting .btn { width:100%; }

/* TABS */
.modal .tabs--ver-list { display:flex; flex-direction:column; align-items:flex-start; }
.modal .tabs--ver-list li button.clicked::after { content:""; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-width:0; border-radius:var(--br-16); padding:var(--space-4); }

.modal .tabs { gap:var(--elements-gap); }
.modal .tabs li { display:block; max-width:540px; margin:auto; }
.modal .tabs article { border-radius:var(--box-br); box-shadow:var(--section-box-shadow); overflow:hidden; }
.modal .tabs article.active { gap:var(--space-4); overflow:visible; }
.modal .tabs .q { cursor:pointer; display:flex; flex-direction:row; gap:var(--elements-gap); padding:var(--space-8) var(--small-box-padding); width:100%; min-height:54px; border-radius:var(--box-br); }
.modal .tabs .q h3 { font:var(--h7-font); font-size:var(--fs-m); letter-spacing:var(--h7-ls); width:100%; }
.modal .tabs .q .btn--s.btn--icon-only { width:24px!important; height:24px; }
.modal .tabs .q .btn--s.btn--icon-only .btn--icon { width:16px; height:16px; }
.modal .tabs .a { display:none; padding:0 var(--small-box-padding) var(--small-box-padding); }
.modal .tabs article.active .a { display:flex; flex-direction:column; gap:var(--elements-gap); }
.modal .tabs .a .article-content { display:flex; flex-direction:column; align-items:start; }
.modal .tabs .a .article-content .article-content-wrapper { display:flex; flex-direction:column; align-items:start; gap:var(--box-gap); }

/* Stacked modal */
.modal.stacked-below { transform:scale(.995); transition:transform 200ms ease,filter 200ms ease; pointer-events:none; }
.modal-overlay .overlay-cover { position:absolute; inset:0; z-index:1200; pointer-events:auto; background:rgba(0,0,0,.2); display:none; }
.modal-overlay.stacked .overlay-cover { display:block; }


/* =========================================================
  🧩 RWD
========================================================= */
@media(min-width:1px) and (max-width:900px) { 
  .modal { width:100%; max-width:100%; border-radius:var(--modal-radius-mobile) var(--modal-radius-mobile) 0 0; margin:0; box-shadow:0 -8px 30px rgba(0,0,0,.28); max-height:var(--modal-mobile-max-height); transition:transform var(--modal-transition-duration) cubic-bezier(.2,.9,.3,1),opacity var(--modal-transition-duration) ease,height var(--modal-transition-duration) cubic-bezier(.2,.9,.3,1); touch-action:pan-y; }
  .modal.open { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); opacity:1; }
  .modal .modal-container { padding-left: var(--small-box-padding); padding-right: var(--small-box-padding); padding-top: var(--small-box-padding);


/* padding:var(--modal-padding) calc(var(--small-box-padding)-17px) var(--modal-padding) calc(var(--small-box-padding)-8px); */ }
  .modal .drag-handle { width:36px; height:4px; border-radius:99px; background:rgba(0,0,0,.18); margin:8px auto 0; }
  .modal-header { padding:0 16px 0 8px; display:flex; flex-direction:row; justify-content:space-between; }
  .modal-body { padding:16px 16px 80px 8px; }
  .modal { height:100%; max-height:var(--modal-mobile-max-height); }
}

@media(min-width:1px) and (max-width:640px) { 
  .modal-overlay { align-items:flex-start; }
  .modal { width:100%; max-width:100vw; margin-top:auto; margin-bottom:0; height:100%; max-height:var(--modal-mobile-max-height); }
  .modal-header-content .logo img { height:var(--space-42); width:auto; }
}

@media(min-width:641px) and (max-width:900px) { 
  .modal-overlay { align-items:flex-start; }
  .modal { width:100%; max-width:100vw; margin:auto; height:100%; max-height:var(--modal-mobile-max-height); }
  .modal-header-content .logo img { height:var(--space-42); width:auto; }
}

@media(min-width:901px) and (max-width:1023px) { 
  .modal-overlay { align-items:flex-start; }
  .modal { width:100%; max-width:90vw; margin:auto; }

  .modal.open { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); opacity:1; }
  .modal-header-content .logo img { height:var(--space-42); }
}

@media(min-width:1024px) and (max-width:1199px) { 
  .modal-overlay { align-items:flex-start; }
  .modal { width:100%; max-width:90vw; height:100%; max-height:95vh; margin:auto; }

  .modal.open { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); opacity:1; }
  .modal-header-content .logo img { height:var(--space-42); }
}

@media(min-width:1200px) { 
  .modal-overlay { align-items:flex-start; }
  .modal { width:100%; max-width:1200px; height:auto; max-height:95vh; margin:auto; }

  .modal.open { position:fixed; top:50%; left:50%;transform:translate(-50%,-50%); opacity:1; }
  .modal-header-content .logo img { height:var(--space-42); }

  .multiple-col .col-left { width:60%; }
  .multiple-col .col-left iframe { height:400px; }
  .multiple-col .col-right { width:40%; min-width:400px; }
}