:root{
    /* --ink:#1B2A4A; */
    /* --ink-soft:#4C5876; */
    /* --cream:#F8F4E9; */
    /* --cream-deep:#EFE4CE; */
    /* --coral-dark:#AD8A3C; */
    /* --coral:#CDAA5F; */
    /* --burgundy:#7A1F2B; */
    /* --line: rgba(27,42,74,0.16); */
    --line-strong: rgba(27,42,74,0.32);
  }
  .uletel {transform:translateY(var(--he-he)); transition: .3s}
  .nav{position:sticky; top:0; z-index:60; background:rgba(247,242,230,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto; gap:20px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:10px; font-size:18px;}
  .brand .crest{width:32px; height:32px; border:1px solid var(--coral-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--coral-dark);}
  .brand small{display:block; font-size:9px; letter-spacing:1.6px; color:var(--ink-soft); font-weight:500;}
  .page-tabs{display:flex; gap:6px;}
  .page-tab{font-size:12px; padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; background:#fff; color:var(--ink-soft); transition:all .2s ease;}
  .page-tab.active{background:var(--ink); color:var(--cream); border-color:var(--ink);}
  .nav-phone{font-size:13px; font-weight:500; border:1px solid var(--line-strong); padding:8px 16px; border-radius:2px;}

  .hero{padding:44px 24px 26px;}
  .hero-inner{max-width:1120px; margin:0 auto;}
  .eyebrow{font-size:11px; letter-spacing:2.6px; text-transform:uppercase; 	 margin-bottom:14px;}
  .hero h1{font-size:clamp(30px,5vw,44px); letter-spacing:-0.5px;}
  .hero-sub p{margin-top:12px; font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:560px;}
  .main-control {display: flex;flex-direction: row;align-items: center;justify-content: space-between;gap: 20px;overflow-x: auto;}
  .filters{display:flex;gap:8px;padding: 0;position:sticky;top:65px;z-index:40;}
  .filter-tab, .schedule-call{
    font-size:12px; padding:9px 18px; border:1px solid var(--line-strong); border-radius:999px;
    cursor:pointer; background:#fff; color:var(--ink-soft); letter-spacing:0.2px; transition:all .2s ease;
    white-space:nowrap;
  }
  .filter-tab:hover, .schedule-call:hover{border-color:var(--coral-dark);}
  .filter-tab.active{background:var(--ink); color:var(--cream); border-color:var(--ink);}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap: 20px;padding:26px 0 40px;}


  .card{
    background:#fff; border:1px solid var(--line);     border-radius: var(--border-round-less); cursor:pointer; position:relative;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(18px); animation:cardIn .5s ease forwards;
  }
  @keyframes cardIn{to{opacity:1; transform:translateY(0);}}
  .card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(22,36,31,0.10); border-color:var(--coral-dark);}
  .card-img{
    aspect-ratio: 4/3;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
	padding: 2px;
    font-size:52px;
    line-height:1;
    color:var(--ink);
    border-radius: var(--border-round-less);
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  .add-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    /* border: 1px solid var(--line); */
    box-shadow: 0px 0px 2px var(--line);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
    z-index:5;
    transition:all .2s ease;
    color:var(--ink);
  }
  .add-btn:hover{color: var(--red-main);border-color: var(--coral-dark
);box-shadow: 0px 0px 2px var(--coral-dark);}
  .add-btn.added{background: var(--red-rubus);color:#fff;border-color: var(--red-rubus);background: inherit;border-color: var(--coral-dark);color: var(--red-main);}
  .card-body{padding:16px 18px 18px; display: flex; flex-direction: column; justify-content: flex-end;}
  .card-body h3{font-size:16px; margin-bottom:6px; line-height:1.25;}
  .card-tags{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}
  .card-meta{display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); font-size:12px;}
  .card-price{color:var(--burgundy); font-weight:500;}

  /* Cart bar */
  .cart-bar{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 70;
	max-width: 1140px;
	background: var(--ink);
	color: var(--cream);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 26px;
	margin: auto;
	border-radius: var(--border-round-more);
	transform: translateY(110%);
	transition: transform .3s ease;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
	}
  .cart-bar.visible{transform: translateY(-10px);}
  .cart-info{font-size:13px;}
  .cart-info b{color:var(--coral); font-size:16px; font-weight:500;}
  .cart-note{font-size: 12px;color:rgba(247,242,230,0.55);margin-top:2px;}
  .cart-actions{display:flex; gap:10px; align-items:center;}
  .cart-clear{position: absolute;font-size: 16px;font-weight: 600;width: 26px;background: var(--cream);border: 1px solid var(--line-strong);top: -10px;right: -2px;border-radius: 50px;color: var(--ink);}
  .cart-clear:hover{}
  .cart-warn{color:#E7A0A0; font-weight:600;}
	/* GHOST BUTTONS OSTAVIT */
  .btn.ghost{background:transparent; color:var(--cream); border:1px solid rgba(247,242,230,0.35); font-size:13px; padding:12px 18px; cursor:pointer; transition:border-color .2s ease;}
  .btn.ghost-dark{background:transparent; color:var(--ink); border:1px solid rgba(47,42,30,0.35); font-size:13px; padding:12px 18px; cursor:pointer; transition:border-color .2s ease;}
  .btn.ghost:hover{border-color:var(--coral);}
  .btn.ghost-dark:hover{border-color:var(--ink);}

	/* form body*/

   .form-body, .preview-body, .detail-body{padding:32px 32px 34px;}


  /* Schedule preview modal */

  .preview-body h2{font-size:22px; margin-bottom:6px;}
  .preview-body p.hint{font-size:13px; color:var(--ink-soft); margin-bottom:20px;}
  .preview-day{margin-bottom:20px;}
  .preview-day h4{font-size:13px; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line);}
  .preview-slot{display:flex; align-items:center; gap:12px; padding:8px 10px; font-size:13px; border-left:3px solid var(--coral-dark); margin-bottom:6px; background:#fff;}
  .preview-slot b, .preview-slot strong {font-family: 'Avenir Next Cyr', arial, sans-serif;}
  .preview-slot.conflict{border-left-color:var(--burgundy); background:#FBEDEC;}
  .preview-slot .t{ color:var(--ink); width:90px; flex-shrink:0;}
  .preview-conflict-tag{margin-left:auto; font-size:11px; color:var(--burgundy); font-weight:600;}
  .preview-summary{margin-top:22px; padding:14px 16px; background:#fff; border:1px solid var(--line); font-size:13px;}
  .preview-summary.ok{border-color:#5C7A5C; color:#3D5C3D;}
  .preview-summary.bad{border-color:var(--burgundy); color:var(--burgundy);}

  /* Modal shared */
  .overlay{
    position:fixed; inset:0; background:rgba(22,36,31,0.55); z-index:100;
    display:flex; align-items:flex-start; justify-content:center; padding:40px 18px;
    opacity:0; pointer-events:none; transition:opacity .25s ease; overflow-y:auto;
  }
  .overlay.open{opacity:1; pointer-events:auto;}
  .modal{
    background:var(--cream); max-width:640px; width:100%;     height: auto; margin-top:20px; border-radius: var(--border-round-less);
    transform:translateY(16px); transition:transform .25s ease; position:relative;
  }
  .modal .form-body .field-flexo{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;	 
  }
  .overlay.open .modal{transform:translateY(0);     display: inline-block;}
  .modal-close{position: absolute;top: 16px;right: 16px;width: 36px;height: 36px;border:1px solid var(--line-strong);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;z-index:2;}

  .detail-img{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:72px;
    line-height:1;
    background-color: #fff;
    color:var(--ink);
  }

  .detail-body .eyebrow{margin-bottom:10px;}
  .detail-body h2{font-size:26px; margin-bottom:14px;}
  .detail-row{display:flex; gap:22px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px; font-size:13px;}
  .detail-row div span{display:block; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px;}
  .detail-body .desc, .detail-body .desc p, .detail-body .desc ul, .detail-body .slots ul{font-size: 14px;color:var(--ink-soft);margin-top:10px;}
  .detail-body .slots {margin-top: 20px;     margin-bottom: 20px;}
  .detail-body .desc ul, .detail-body .slots ul {list-style-position: inside;list-style-type: disc;}
  .detail-body .slots ul li{margin-bottom: 5px;}
 
  .btn-gold{display:inline-block; background:var(--coral-dark); color:var(--ink); font-weight:600; font-size:13px; letter-spacing:0.3px; padding:14px 28px; border:none; cursor:pointer; transition:background .2s ease;}
  .btn-gold:hover{background:var(--coral);}
  .btn-outline{display:inline-block; background:transparent; color:var(--ink); font-weight:500; font-size:13px; padding:14px 22px; border:1px solid var(--line-strong); cursor:pointer; margin-left:10px;}
  .btn-outline:hover{border-color:var(--coral-dark); color:var(--burgundy);}

  /* Signup form modal */
 
  .form-body h2{font-size:23px; margin-bottom:8px;}
  .form-body p.hint{font-size:13px; color:var(--ink-soft); margin-bottom:22px;}
  .field{margin-bottom:6px;}
  .field label{width: auto}
  .kruzhki-opt{display: block;position: relative;font-size: 12px;text-align: center;min-width: 100px;min-height: 24px;padding: 5px 10px;text-transform:uppercase;letter-spacing: 0;color:var(--ink-soft);background: var(--cream-gusto);border: 1px solid var(--cream-gusto);border-radius: var(--border-round-more);}
  .field input{width:100%; border:1px solid var(--line-strong); background:#fff; padding:12px 14px; font-size:14px; color:var(--ink);}
  .field input:focus{outline:none; border-color:var(--coral-dark);}
  
  .kruzhki-select input[type="checkbox"]{ appearance: none;     -webkit-appearance: none;     position: absolute;     opacity: 0;     width: 0;     height: 0;     margin: 0;     padding: 0;     overflow: hidden;     clip: rect(0, 0, 0, 0);     white-space: nowrap;     border: 0;}
  .kruzhki-select input[type="checkbox"]:checked + .kruzhki-opt{
	  background: transparent;
	  border: 1px solid var(--coral-new);
	  color: #ffffff;
	 }
  .kruzhki-select{min-height: 220px;/* overflow-y: auto; */padding: 0;display: flex;flex-wrap: wrap;gap: 10px;row-gap: 15px;justify-content: space-evenly;}
  .kruzhki-opt:hover{    background: transparent;  cursor:pointer; outline: 1px solid var(--coral-new);}

  .kruzh-price {display: block;position: absolute;bottom: -1.5em;line-height: 1.25;right: -10px;background: #ffffff;border: 1px solid #dddddd73;border-radius: var(--border-round-less);padding: 2px 10px;font-size: 10px;text-transform: lowercase;color: var(--ink-soft);}  
  .kruzh-name {     overflow-wrap: anywhere;     color: #333; }

  .selected-count{font-size:12px; margin-top:15px; display:flex; justify-content:space-between;}
  .schedule-header {/* display: flex; */position: relative;}
  #page-schedule {
    background: #fff;
    padding: 40px 20px;
    border-radius: var(--border-round-less);
    margin-top: 5vh;
    position: relative;
	width: 1140px;
 }
  #schedContent {display: flex;flex-direction: row;overflow: auto;gap: 20px;justify-content: space-between;padding: 10px;flex-wrap: wrap}
  

  /* Schedule page */
  .sched-groups{display:flex; gap:8px; flex-wrap:wrap; padding:22px 0 30px;}
  /* .sched-body{padding-bottom:80px;} */
  .sched-day{min-width: 30%;margin-bottom:15px;box-shadow: 1px 1px 1px 3px var(--blue);padding: 20px;border-radius: var(--border-round-more);flex: 1;max-width: 400px;}
  .sched-day h3{font-size:16px;color: var(--red-main);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);}
  .sched-entry{display:flex;align-items:center;gap: 10px;padding: 6px 0;font-size: 13px;border-bottom:1px dashed var(--line);}
  .sched-entry:last-child{border-bottom:none;}
  .sched-time{color: var(--blue-deep);max-width: 50px;font-size:14px;/* word-break: auto-phrase; */}
  .sched-title{flex: 1 0;/* min-width:140px; */}
  .sched-room{color:var(--ink-soft);font-size:12px;}
  .sched-empty{color:var(--ink-soft); font-size:13px; padding:8px 0;}

  .hidden{display:none !important;}
  
  @media (max-width:600px){
	.grid{grid-template-columns:1fr 1fr;}
	.cart-bar{flex-direction: column; width: 100%; margin: 0;padding: 10px;border-radius: 0;}
	.cart-bar.visible{		transform: translateY(0%);	}
	.cart-note {    font-size: 10px;    margin: 2px;    width: 100%;}
	.preview-body, .form-body, .detail-body {
		padding: 10px 20px 30px;
	}
	#schedContent {
    display: flex;
    flex-direction: column;
	}
	  .modal .form-body .field-flexo{
    flex-direction: column;	 
	}
	.sched-day {
    min-width: 25%;
    margin-bottom: 0;
    box-shadow: 1px 1px 1px 3px var(--blue);
    padding: 20px;
    border-radius: var(--border-round-more);
    /* flex: 1 0 49%; */
    }
  }