/*
 * campaign_cubes.css - кубовете на /campaign/X?view=cube (К2: страни 1-2, лепкава лента, телефон; К2б: визията на прототипа на Кирил;
 * К3: страни 3 „Дати" и 4 „Стаи"; К4б: „Добави в количката" и лентата на количката).
 * Цветовете са променливи --cc-*: по подразбиране са от променливите на кампанията (--cmp-*, виж campaign.css), светли;
 * Черният петък ги сменя с палитрата на прототипа в campaign_blackfriday.css.
 * Селекторите са само ASCII и всички са с префикс cc-, за да не засегнат старата решетка.
 */
/* Стойностите по подразбиране са на html, а не на :root: този файл се зарежда в тялото, СЛЕД campaign_<X>.css от head-а,
   и при еднакъв селектор щеше да надделее. :root е по-силен селектор от html - така файлът на кампанията винаги печели. */
html{
	--cc-ink:var(--cmp-page-bg,#fff);
	--cc-panel:var(--cmp-card-bg,#fafafa);
	--cc-panel-2:var(--cmp-mob-border,#ececec);
	--cc-line:var(--cmp-mob-border,#ececec);
	--cc-text:var(--cmp-card-text,#333);
	--cc-muted:var(--cmp-card-subtitle,#707070);
	--cc-hot:var(--cmp-accent,#265e94);
	--cc-hot-ink:var(--cmp-nav-text,#fff);
	--cc-hot-2:var(--cmp-accent-hover,#e67600);
	--cc-sea:#f2c200;
	--cc-sea-ink:#222;
	--cc-good:var(--cmp-accent,#265e94);
	--cc-good-ink:var(--cmp-nav-text,#fff);
	--cc-stars:#f2a900;
	--cc-chip:var(--cmp-mob-bg,#fafafa);
	--cc-chip-text:var(--cmp-mob-text,#265e94);
	--cc-chip-on:var(--cmp-accent,#265e94);
	--cc-chip-on-text:var(--cmp-nav-text,#fff);
	/* текстът върху снимката е светъл при всяка кампания - отдолу е тъмният преход */
	--cc-photo-text:#fff;
	--cc-photo-muted:rgba(255,255,255,.82);
	/* К4а: наличността на стаите - зелено и оранжево. --cc-good на светлите кампании е цветът на кампанията (синьо),
	   затова отделни; на Черния петък идват от палитрата му (--bf-good, --bf-hot), иначе - тези */
	--cc-ok:var(--bf-good,#1b7f3b);
	--cc-ok-ink:var(--bf-ink,#fff);
	--cc-warn:var(--bf-hot,#e67600);
	--cc-warn-ink:#1a0c00;
}
/* overflow-x: clip е на списъка, не на html: при html{overflow-x:clip} overflow-ът на body (hidden от сайта) не стига
   до прозореца и страницата спира да се превърта (Chrome, проверено 14.10). clip не прави контейнер за превъртане -
   лепкавата лента остава лепкава. */
.citems-wrapper{overflow-x:clip}

/* решетката на лендинга (campaign.css) е за малките карти - 200px, на телефон две колони; кубовете са по-широки */
.hotel-grid-items{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:34px 26px}
@media (max-width:600px){
	.hotel-grid-items{grid-template-columns:1fr}
}

/* ---------- лепкавата лента с категориите ---------- */
.cc-nav{position:sticky;top:var(--cc-top,0px);z-index:40;background:var(--cc-ink);box-shadow:0 2px 8px var(--cmp-sticky-shadow,rgba(0,0,0,.12))}
.cc-nav-in{display:flex;gap:8px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cc-nav-in::-webkit-scrollbar{display:none}
.cc-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cc-line);background:var(--cc-chip);color:var(--cc-chip-text);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.cc-nav a.cc-nav-on{background:var(--cc-chip-on);border-color:var(--cc-chip-on);color:var(--cc-chip-on-text)}
/* центрирана, когато се събира; auto полетата стават 0 при преливане, затова началото не се реже (justify-content:center го реже) */
.cc-nav a:first-child{margin-left:auto}
.cc-nav a:last-child{margin-right:auto}
/* котвите да не остават под лентата */
[id^="category_"]{scroll-margin-top:var(--cc-scroll,60px)}

/* ---------- картата ---------- */
/* височината е фиксирана, за да не расте картата при въртене. К8: рамката, фонът и ъглите са на картата - лентата със
   страните е в нея, отдолу: 1 + 8 + кубът 460 + 8 + лентата 44 + 8 + 1 = 530 */
.cc-card{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;margin:0;padding:8px;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-panel);color:var(--cc-text);text-align:left;content-visibility:auto;contain-intrinsic-size:auto 530px}
/* pan-y: вертикалното превъртане е на браузъра, хоризонталното плъзгане - на куба (без него телефонът праща pointercancel) */
.cc-cw{position:relative;height:460px;outline-offset:-2px;touch-action:pan-y}
.cc-cube{position:relative;height:100%}
/* К8: в покой страните са без рамка (тя е на картата); фонът остава - при въртене страната не е прозрачна */
.cc-face{position:relative;box-sizing:border-box;height:100%;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--cc-panel)}

/* в покой: плоско, показва се само активната страна (виж бележките на Кирил, §6) */
.cc-cube.cc-flat .cc-face{display:none}
.cc-cube.cc-flat .cc-face.cc-on{display:flex}

/* докато се върти: всяка страна се върти отделно - при цял куб на 90 градуса Chrome не доставя кликове */
/* К3s: cc-3d слага JS (Unflat/Flat) - вместо :has(), който браузърът преизчислява при всяка промяна, и при скрол */
.cc-cw.cc-3d{perspective:1400px;overflow:visible}
.cc-cube:not(.cc-flat){position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:translateZ(calc(var(--half,150px) * -1))}
.cc-cube:not(.cc-flat) .cc-face{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;display:flex;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
/* К8: докато се върти - с рамка, иначе страната се слива с фона на картата */
.cc-cube:not(.cc-flat) .cc-face{border:1px solid var(--cc-line)}
.cc-cube:not(.cc-flat) .cc-f1{transform:rotateY(calc(0deg + var(--ry,0deg))) translateZ(var(--half,150px))}
.cc-cube:not(.cc-flat) .cc-f2{transform:rotateY(calc(90deg + var(--ry,0deg))) translateZ(var(--half,150px))}
.cc-cube:not(.cc-flat) .cc-f3{transform:rotateY(calc(180deg + var(--ry,0deg))) translateZ(var(--half,150px))}
.cc-cube:not(.cc-flat) .cc-f4{transform:rotateY(calc(270deg + var(--ry,0deg))) translateZ(var(--half,150px))}
/* .45s = SPIN в js/campaign_cubes.js (там таймерът е SPIN + 50) - сменя се и на двете места */
.cc-cube.cc-spin .cc-face{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cc-cube.cc-drag .cc-face{transition:none}
/* К3: докато се плъзга и върти, мишката не маркира текст (иначе след плъзгането остава маркирано заглавие) */
.cc-cube:not(.cc-flat){user-select:none}
.cc-card.cc-3d{overflow:visible}

/* страна 1: снимката покрива цялата страна (img, не фон - заради SEO/LCP), отгоре тъмният преход, отгоре текстът */
.cc-media{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--cc-panel-2);overflow:hidden}
/* -webkit-user-drag/draggable: иначе мишката започва влачене на снимката, браузърът праща pointercancel и кубът не се завърта */
.cc-media img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;transition:transform 1.2s ease}
@media (hover:hover){
	.cc-card:hover .cc-media img{transform:scale(1.05)}
}
.cc-f1::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,15,31,.15) 0%,rgba(10,15,31,0) 30%,rgba(10,15,31,.75) 58%,rgba(10,15,31,.97) 100%)}
.cc-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:12px}
.cc-badges{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cc-badge{display:inline-block;padding:5px 9px;border-radius:8px;font-size:13px;font-weight:700;line-height:1.2;background:rgba(10,15,31,.85);color:var(--cc-photo-text)}
.cc-badge.cc-d{background:var(--cc-hot);color:var(--cc-hot-ink);font-size:16px}
.cc-badge.cc-v{background:var(--cc-sea);color:var(--cc-sea-ink)}
.cc-badge.cc-omv{display:inline-flex;align-items:center;gap:5px;background:#0a1a3c;color:#fff}
.cc-badge.cc-omv img{display:block;height:13px;width:auto}
/* „важи до" - последна, след горивото */
.cc-badge.cc-until{order:9;font-weight:600;font-size:12px}
.cc-rate{flex:none;padding:5px 9px;border-radius:10px;border:1px solid var(--cc-line);background:rgba(10,15,31,.85);color:var(--cc-photo-text);text-align:center}
.cc-rate b{display:block;font-size:17px;line-height:1.1}
.cc-rate small{font-size:11px;color:var(--cc-photo-muted)}
.cc-body{position:relative;z-index:2;margin-top:auto;padding:16px;color:var(--cc-photo-text)}
/* звездите са N знака от PHP: изрязването на 5 звезди по ширина зависи от шрифта и показваше 5 вместо 4 */
.cc-stars{display:block;height:16px;font-size:13px;line-height:16px;letter-spacing:2px;color:var(--cc-stars);white-space:nowrap}
.cc-name{margin:4px 0 2px;font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--cc-photo-text)}
.cc-name a{color:var(--cc-photo-text);text-decoration:none}
.cc-city{color:var(--cc-photo-muted);font-size:14px}
.cc-price{margin:12px 0 0;font-size:13px;line-height:1.35;color:var(--cc-photo-muted)}
.cc-price b{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--cc-photo-text)}
.cc-btn{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:0 12px;border-radius:11px;background:var(--cc-hot);color:var(--cc-hot-ink);font-weight:700;font-size:16px;text-decoration:none}
.cc-btn:hover{background:var(--cc-hot-2);color:var(--cc-hot-ink)}

/* лентата със страните - под куба, като точките на Кирил; К8: в рамката на картата. К9: текстът е по средата на таба,
   чертата (и активната) - на цялата му ширина */
.cc-tabs{display:flex;gap:6px;margin-top:8px}
.cc-tab{flex:1;min-height:44px;padding:7px 0 0;border:0;border-top:3px solid var(--cc-line);background:transparent;color:var(--cc-muted);font:inherit;font-size:13px;text-align:center;cursor:pointer}
.cc-tab.cc-tab-on{border-top-color:var(--cc-hot);color:var(--cc-text);font-weight:600}

/* страна 2: хотелът - във височината на куба; К4а: тялото се превърта отвътре (с „Накратко" удобствата вече не се
   побират сами), бутоните „Описание" и „Виж хотела" са долу, в един ред и с еднаква височина (К9). К8: стигне ли края, скролът минава към страницата (без overscroll-behavior) */
.cc-hotel{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;padding:12px 14px;color:var(--cc-text);overflow:auto;touch-action:pan-y}
.cc-hotel > *{flex:none}
.cc-car{position:relative;height:160px;border-radius:12px;overflow:hidden;background:var(--cc-panel-2);touch-action:pan-y;user-select:none}
.cc-car img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.cc-car-b{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(10,15,31,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.cc-car-l{left:6px}
.cc-car-r{right:6px}
.cc-car-n{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:6px;background:rgba(10,15,31,.7);color:#fff;font-size:12px}
.cc-all{align-self:flex-start;color:var(--cc-hot-2);font-size:13px;font-weight:600}
.cc-score{display:flex;align-items:center;gap:12px}
.cc-big{flex:none;padding:6px 9px;border-radius:10px;background:var(--cc-good);color:var(--cc-good-ink);font-size:20px;font-weight:800}
.cc-score-t b{display:block;font-size:15px}
.cc-score-t span{color:var(--cc-muted);font-size:12.5px}
.cc-cats{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.cc-cat{display:grid;grid-template-columns:1fr auto;gap:3px 6px;min-width:0;font-size:12px;color:var(--cc-muted)}
.cc-cat b{color:var(--cc-text);font-weight:600}
.cc-cat i{grid-column:1/-1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--cc-sea),var(--cc-hot)) 0 0/var(--v,0%) 100% no-repeat,var(--cc-panel-2)}
.cc-hotel > .cc-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.cc-chip{padding:4px 8px;border-radius:8px;background:var(--cc-panel-2);color:var(--cc-text);font-size:12px}
.cc-brief b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-hot-2);font-weight:600}
.cc-brief p{margin:3px 0 0;font-size:13px;line-height:1.4;color:var(--cc-text)}
.cc-ff2{display:flex;gap:8px}
/* К8: лентите с описанията на хотела и на пакетите - като лентите на стаите (.cc-room, .cc-rh); стрелката сочи надясно -
   лентата отваря описанието, не се разпъва. К9: лентите са в прозореца „Описание" (списъкът), не на страната */
.cc-dl{display:flex;flex-direction:column;gap:8px}
.cc-dl-b{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:8px 12px 8px 10px;border:1px solid var(--cc-line);border-radius:12px;background:transparent;color:var(--cc-text);font:inherit;text-align:left;cursor:pointer}
.cc-dl-b:hover{border-color:var(--cc-hot-2)}
.cc-dl-n{min-width:0;font-size:13.5px;font-weight:600;line-height:1.3}
.cc-dl-a{justify-self:center;width:8px;height:8px;border-right:2px solid var(--cc-muted);border-bottom:2px solid var(--cc-muted);transform:rotate(-45deg)}
.cc-desc-b, .cc-see{flex:1 1 0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:44px;padding:0 10px;border-radius:11px;font:inherit;font-weight:700;font-size:15px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.cc-desc-b{border:1px solid var(--cc-line);background:transparent;color:var(--cc-text)}
.cc-desc-b:hover{border-color:var(--cc-hot-2)}
.cc-see{border:0;background:var(--cc-hot);color:var(--cc-hot-ink)}
.cc-see:hover{background:var(--cc-hot-2);color:var(--cc-hot-ink)}

/* К4а: страна 1 - тапът води към хотела */
@media (hover:hover){
	.cc-cube.cc-flat .cc-f1{cursor:pointer}
}

/* К4а: прозорецът „Описание" (в body). На телефон - целият екран. Описанието е HTML от админа с inline цветове, шрифтове
   и фон - неутрализирани, за да е четимо и на тъмния фон на Черния петък */
.cc-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;align-items:center;justify-content:center;padding:24px;background:rgba(5,8,18,.62)}
.cc-modal.cc-modal-on{display:flex}
.cc-modal-w{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:680px;max-height:86vh;overflow:hidden;border:1px solid var(--cc-line);border-radius:16px;background:var(--cc-panel);color:var(--cc-text);box-shadow:0 20px 60px rgba(0,0,0,.45);outline:0;text-align:left}
.cc-modal-h{flex:none;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-bottom:1px solid var(--cc-line)}
.cc-modal-h h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.25;color:var(--cc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-modal-x{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--cc-text);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.cc-modal-x:hover{background:var(--cc-panel-2)}
/* К9: „Назад към списъка" - между заглавието и текста, само при описание, избрано от списъка */
.cc-modal-k{display:none;flex:none;padding:10px 18px 0}
.cc-modal-k.cc-modal-k-on{display:block}
.cc-modal-back{min-height:44px;padding:0 14px;border:1px solid var(--cc-line);border-radius:10px;background:transparent;color:var(--cc-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cc-modal-back:hover{border-color:var(--cc-hot-2)}
.cc-modal-b{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 18px 18px;font-size:15px;line-height:1.55}
.cc-modal-m{margin:28px 0;color:var(--cc-muted);text-align:center}
.cc-desc *{color:inherit!important;font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;background:transparent!important}
.cc-desc h1, .cc-desc h2, .cc-desc h3, .cc-desc h4, .cc-desc h5, .cc-desc h6{margin:.9em 0 .4em;font-size:1.08em!important;font-weight:700}
.cc-desc p{margin:0 0 .7em}
.cc-desc a{text-decoration:underline}
.cc-desc img, .cc-desc video, .cc-desc table{max-width:100%!important}
.cc-desc img{height:auto!important}
.cc-desc iframe{display:block;width:100%!important;max-width:100%;height:auto!important;aspect-ratio:16/9;border:0}
@media (max-width:520px){
	.cc-modal{padding:0}
	.cc-modal-w{max-width:none;height:100%;max-height:none;border:0;border-radius:0}
}

/* К3, страни 3 и 4: заглавие (като .fh на Кирил), тяло и долу бутонът. Всичко е във височината на куба,
   тялото и списъкът със стаите се превъртат отвътре; К8: стигнат ли края, скролът минава към страницата */
.cc-fh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--cc-line)}
.cc-k{flex:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-hot-2);font-weight:600}
.cc-n{min-width:0;font-size:14px;font-weight:700;color:var(--cc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-fb{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;padding:12px 14px;color:var(--cc-text);overflow:auto;touch-action:pan-y}
.cc-fb > *{flex:none}
.cc-ff{flex:none;padding:0 14px 14px}
.cc-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:11px;background:var(--cc-hot);color:var(--cc-hot-ink);font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.cc-go:hover{background:var(--cc-hot-2)}

/* страна 3: формата - датата на целия ред, после нощувки / възрастни / деца, после възрастта на децата */
.cc-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cc-ages{grid-template-columns:repeat(4,minmax(0,1fr))}
.cc-fld{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12.5px;color:var(--cc-muted)}
.cc-fld-fd{grid-column:1/-1}
/* 16px - иначе iPhone увеличава страницата при фокус */
.cc-fld input, .cc-fld select{box-sizing:border-box;width:100%;min-height:44px;padding:0 8px;border:1px solid var(--cc-line);border-radius:9px;background:var(--cc-panel-2);color:var(--cc-text);font:inherit;font-size:16px}
.cc-bad{padding:8px 10px;border-radius:9px;background:var(--cc-panel-2);color:var(--cc-hot-2);font-size:13px;font-weight:600}
/* К3s: полето с календара на сайта е readonly - курсорът да показва, че се натиска */
.cc-fld input[readonly]{cursor:pointer}

/* К3s: календарът на страна 3 (daterangepicker, в body). cc-drp е винаги, cc-drp-dark - само на Черния петък (JS го слага,
   когато има палитрата --bf-*); на другите кампании остава светлият стил на сайта. Селекторите са с .daterangepicker
   отпред - да надделеят над daterangepicker.css, без !important. */
.daterangepicker.cc-drp{max-width:calc(100vw - 16px)}
/* #8: на компютър (от 564px) daterangepicker.css слага на календара float:left и max-width:270px - свива се до таблицата и
   остава вляво; тук заема цялата ширина (JS я прави колкото полето). Отстъпите - еднакви от двете страни. */
.daterangepicker.cc-drp .drp-calendar.left{float:none;max-width:none;padding:8px}
.daterangepicker.cc-drp .drp-calendar.left .calendar-table{padding-right:0}
.daterangepicker.cc-drp .calendar-table table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px}
.daterangepicker.cc-drp .calendar-table th{width:auto;min-width:0}
.daterangepicker.cc-drp .calendar-table td{width:auto;min-width:0;height:48px;padding:0;border-radius:9px;font-weight:400;font-size:14px;line-height:1.1}
/* на телефон по-ниски клетки - с 48px календарът с легендата не се събира над/под полето */
@media (max-width:600px){.daterangepicker.cc-drp .calendar-table td{height:36px}}
.daterangepicker.cc-drp-dark{background-color:var(--cc-panel);border-color:var(--cc-line);color:var(--cc-text)}
.daterangepicker.cc-drp-dark:before{border-bottom-color:var(--cc-line)}
.daterangepicker.cc-drp-dark:after{border-bottom-color:var(--cc-panel)}
.daterangepicker.cc-drp-dark.drop-up:before{border-top-color:var(--cc-line)}
.daterangepicker.cc-drp-dark.drop-up:after{border-top-color:var(--cc-panel)}
.daterangepicker.cc-drp-dark .calendar-table{background-color:var(--cc-panel);border-color:var(--cc-panel)}
.daterangepicker.cc-drp-dark .calendar-table .next span, .daterangepicker.cc-drp-dark .calendar-table .prev span{border-color:var(--cc-text)}
.daterangepicker.cc-drp-dark td.available:hover, .daterangepicker.cc-drp-dark th.available:hover{background-color:var(--cc-panel-2);color:var(--cc-text)}
.daterangepicker.cc-drp-dark td.off, .daterangepicker.cc-drp-dark td.off.in-range, .daterangepicker.cc-drp-dark td.off.start-date, .daterangepicker.cc-drp-dark td.off.end-date, .daterangepicker.cc-drp-dark td.disabled{background-color:transparent;color:var(--cc-muted)}
.daterangepicker.cc-drp-dark td.active, .daterangepicker.cc-drp-dark td.active:hover{background-color:var(--cc-hot);border-color:transparent;color:#fff}
.daterangepicker.cc-drp-dark select.monthselect, .daterangepicker.cc-drp-dark select.yearselect{background-color:var(--cc-panel-2);border-color:var(--cc-line);color:var(--cc-text)}

/* #8: цените в календара (JS CalPaint, данните от cron_price_calendar.php). Цената е под датата, с точка пред нея; нивото
   на цената: cc-p1 (долна трета, зелено), cc-p2 (средна, жълто), cc-p3 (горна, оранжево) - прозрачен фон, рамка и точка
   в цвета на нивото, еднакви в двете теми; цената е по-тъмна в светлия календар (контраст). Избраната дата (active) остава
   с цвета си, цената и точката - бели. Датата е в цвета на текста.
   pointer-events:none - кликът по цената да стигне до td (daterangepicker гледа e.target). */
.daterangepicker.cc-drp{--cc-p1:rgba(74,222,128,.25);--cc-p1-line:rgba(74,222,128,.55);--cc-p1-dot:#4ade80;--cc-p1-ink:#15803d;--cc-p2:rgba(250,204,21,.25);--cc-p2-line:rgba(250,204,21,.45);--cc-p2-dot:#facc15;--cc-p2-ink:#8a6a00;--cc-p3:rgba(251,146,60,.25);--cc-p3-line:rgba(253,186,116,.5);--cc-p3-dot:#fdba74;--cc-p3-ink:#c2410c}
.daterangepicker.cc-drp-dark{--cc-p1-ink:#7ee2a6;--cc-p2-ink:#f3d36b;--cc-p3-ink:#ffb98a}
.cc-drp td .cc-pc{display:block;margin-top:3px;font-size:12px;font-weight:700;line-height:1.1;pointer-events:none}
.cc-drp td.cc-p1 .cc-pc:before, .cc-drp td.cc-p2 .cc-pc:before, .cc-drp td.cc-p3 .cc-pc:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:1px}
.daterangepicker.cc-drp .calendar-table td.cc-p1:not(.active){background-color:var(--cc-p1);box-shadow:inset 0 0 0 1px var(--cc-p1-line)}
.daterangepicker.cc-drp .calendar-table td.cc-p2:not(.active){background-color:var(--cc-p2);box-shadow:inset 0 0 0 1px var(--cc-p2-line)}
.daterangepicker.cc-drp .calendar-table td.cc-p3:not(.active){background-color:var(--cc-p3);box-shadow:inset 0 0 0 1px var(--cc-p3-line)}
.cc-drp td.cc-p1 .cc-pc{color:var(--cc-p1-ink)}
.cc-drp td.cc-p2 .cc-pc{color:var(--cc-p2-ink)}
.cc-drp td.cc-p3 .cc-pc{color:var(--cc-p3-ink)}
.cc-drp td.cc-p1 .cc-pc:before, .cc-cal-t1:before{background-color:var(--cc-p1-dot)}
.cc-drp td.cc-p2 .cc-pc:before, .cc-cal-t2:before{background-color:var(--cc-p2-dot)}
.cc-drp td.cc-p3 .cc-pc:before, .cc-cal-t3:before{background-color:var(--cc-p3-dot)}
.cc-drp td.active .cc-pc{color:#fff}
.cc-drp td.active .cc-pc:before{background-color:#fff}
/* легендата под календара: width:0 + min-width:100% - не разширява календара, а заема ширината му; отстъпът е като на клетките */
.cc-cal-leg{clear:both;box-sizing:border-box;width:0;min-width:100%;padding:0 12px 10px;font-size:11px;line-height:1.35;opacity:.85;white-space:normal}
.cc-cal-tiers{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:4px}
.cc-cal-tiers span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.cc-cal-leg .cc-cal-long{margin-top:2px;font-weight:600}

/* страна 4: резюмето и списъкът със стаите (превърта се вътре) */
.cc-f4 .cc-fb{overflow:hidden}
.cc-qsum{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 4px 10px;border-radius:10px;background:var(--cc-panel-2);font-size:13px;font-weight:600}
.cc-edit{flex:none;min-height:36px;padding:0 10px;border:1px solid var(--cc-line);border-radius:8px;background:transparent;color:var(--cc-text);font:inherit;font-size:12.5px;cursor:pointer}
.cc-f4 .cc-res{flex:1 1 auto;min-height:0;overflow:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:10px}
.cc-res > *{flex:none}
.cc-wait{padding:24px 0;color:var(--cc-muted);text-align:center;font-size:14px}
.cc-msg{padding:18px 10px;color:var(--cc-muted);text-align:center;font-size:14px}
.cc-msg p{margin:0 0 10px}
.cc-msg .cc-edit, .cc-retry{min-height:44px;padding:0 14px;border:1px solid var(--cc-line);border-radius:9px;background:transparent;color:var(--cc-text);font:inherit;font-size:14px;cursor:pointer}
.cc-room{border:1px solid var(--cc-line);border-radius:12px;overflow:hidden}
/* К4а: лентата на стаята (бутон): име, под него наличността и „от", вдясно стрелката; вариантите - само разпъната */
.cc-rh{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:4px 10px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:8px 12px 8px 10px;border:0;background:transparent;color:var(--cc-text);font:inherit;text-align:left;cursor:pointer}
.cc-rn{grid-column:1;font-size:13.5px;font-weight:600;line-height:1.3}
.cc-rm{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cc-rp{font-size:13px;font-weight:700;white-space:nowrap}
.cc-ra{grid-column:2;grid-row:1/3;justify-self:center;width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--cc-muted);border-bottom:2px solid var(--cc-muted);transform:rotate(45deg);transition:transform .2s ease}
.cc-room-on .cc-ra{margin-top:4px;transform:rotate(-135deg)}
.cc-ro{border-top:1px solid var(--cc-line)}
.cc-room:not(.cc-room-on) .cc-ro{display:none}
.cc-av{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}
.cc-av-ok{background:var(--cc-ok);color:var(--cc-ok-ink)}
.cc-av-low{background:var(--cc-warn);color:var(--cc-warn-ink)}
.cc-av-ask{background:var(--cc-panel-2);color:var(--cc-muted)}
.cc-opt{display:flex;justify-content:space-between;gap:10px;padding:10px;border-top:1px solid var(--cc-line)}
.cc-opt:first-of-type{border-top:0}
.cc-opt-l{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.cc-bd{font-size:13.5px;font-weight:600}
.cc-eb{padding:1px 6px;border-radius:5px;background:var(--cc-hot);color:var(--cc-hot-ink);font-size:11px;font-weight:700}
.cc-pkg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--cc-muted);font-size:12px;line-height:1.3}
.cc-det{color:var(--cc-muted);font-size:11.5px;line-height:1.3}
.cc-opt-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cc-opt-r s{color:var(--cc-muted);font-size:11.5px}
.cc-pr{font-size:16px;font-weight:800;white-space:nowrap}
.cc-book{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;padding:0 14px;border-radius:10px;background:var(--cc-hot);color:var(--cc-hot-ink);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.cc-book:hover{background:var(--cc-hot-2);color:var(--cc-hot-ink)}
/* К4б: „Добави в количката" - бутон с вида на .cc-book; докато заявката тече - заключен, после „Добавено ✓" за 2 s */
.cc-add{border:0;font-family:inherit;cursor:pointer}
.cc-add:disabled{cursor:default}
.cc-add.cc-add-busy{opacity:.75}
.cc-add.cc-add-ok, .cc-add.cc-add-ok:hover{background:var(--cc-ok);color:var(--cc-ok-ink)}
.cc-add-err{max-width:170px;color:var(--cc-hot-2);font-size:12px;font-weight:600;line-height:1.3}
/* #23 А2б: клиентската цена - лента над „Добави в количката", в една рамка с него (o.cd от campaign_offers.php).
   Картата е широка колкото бутона (min-content), лентата се пренася; бутонът вътре е малко по-малък */
.cc-cd{display:flex;flex-direction:column;width:min-content;max-width:100%;align-self:flex-end;margin-top:4px;border:1px solid var(--cc-ok);border-radius:10px;overflow:hidden}
.cc-cd-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 8px;padding:4px 8px;background:var(--cc-ok);color:var(--cc-ok-ink);font-size:12px;line-height:1.3}
.cc-cd-top b{font-size:15px;white-space:nowrap}
.cc-cd-pc{padding:0 5px;border-radius:8px;background:rgba(255,255,255,.9);color:#1b7f3b;font-size:11px;font-weight:700}
.cc-cd .cc-add{width:100%;min-height:38px;margin-top:0;border-radius:0;font-size:13px}

/* К4б: лентата на количката - долу, цветовете от --cc-* (тъмна на Черния петък, светла на другите кампании).
   С височината на лентата (--cc-cart-h, от JS) се вдигат долният отстъп на страницата - да не закрива последната
   карта - и чатът на сайта (iframe, bottom:20px, z-index 9999, размерите са inline - затова !important).
   К8: „нагоре" (.go-to-top, css/landing_new.css: bottom:120px, без височина - кръгът е от -18 до +30px около
   долния й ръб) - над чата: лентата + 12 + чатът 62 + 10 отстъп + 30 = лентата + 114px */
.cc-cart{position:fixed;left:0;right:0;bottom:0;z-index:990;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;box-sizing:border-box;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--cc-line);background:var(--cc-panel);color:var(--cc-text);box-shadow:0 -4px 16px rgba(0,0,0,.18);font-size:15px;font-weight:600;line-height:1.3;text-align:center}
.cc-cart-go{min-height:44px;padding:0 18px;border:0;border-radius:11px;background:var(--cc-hot);color:var(--cc-hot-ink);font:inherit;font-weight:700;cursor:pointer}
.cc-cart-go:hover{background:var(--cc-hot-2)}
html.cc-cart-on body{padding-bottom:var(--cc-cart-h,64px)}
html.cc-cart-on #allinclusive-chat-iframe{bottom:calc(var(--cc-cart-h,64px) + 12px)!important;max-height:calc(100vh - var(--cc-cart-h,64px) - 24px)!important}
html.cc-cart-on .go-to-top{bottom:calc(var(--cc-cart-h,64px) + 114px)}

/* телефон: кубът 420px, бутони от 44px */
@media (max-width:600px){
	.cc-nav-in{padding:6px 10px}
	.cc-card{margin:0 10px}
	.cc-name{font-size:18px}
	.cc-cats{gap:6px 12px}
}
@media (max-width:520px){
	.cc-card{contain-intrinsic-size:auto 490px}
	.cc-cw{height:420px}
	.cc-car{height:130px}
}
@media (min-width:601px){
	.cc-card{max-width:460px}
}
@media (prefers-reduced-motion:reduce){
	.cc-cube .cc-face{transition:none!important}
	.cc-media img{transition:none}
	.cc-ra{transition:none}
}

/* #8: безплатните нощувки под децата на страна „Дати“ - чипове като останалите контроли на формата */
.cc-extras{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--cc-muted)}
.cc-x-b{min-height:36px;padding:0 12px;border:1px solid var(--cc-line);border-radius:999px;background:var(--cc-panel-2);color:var(--cc-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cc-x-b:hover{border-color:var(--cc-hot);color:var(--cc-hot)}