/* dd-byo.css v1.3.0 - Build Your Own Form */
*,*::before,*::after{box-sizing:border-box}
.dd-wrap{max-width:1000px;margin:0 auto;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#294859;text-align:left}
.center{text-align:center}
.dd-header{
  background:linear-gradient(135deg, #307872 0%, #256b66 50%, #1e5854 100%);
  color:#fff;
  padding:32px 28px;
  border-radius:20px;
  margin-top:8px;
  box-shadow:0 8px 32px rgba(48,120,114,0.25);
  position:relative;
  overflow:hidden;
}
.dd-header::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.dd-header::after{
  content:"";
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events:none;
}
.dd-header-logo{
  width:160px;
  height:auto;
  margin-bottom:16px;
  filter:brightness(0) invert(1);
}
.dd-header h1{color:#fff !important;margin:0 0 10px;font-weight:700;font-size:1.75rem;position:relative;z-index:1}
.dd-header .sub{color:rgba(255,255,255,0.92);margin:0 0 6px;position:relative;z-index:1;font-size:1.02rem}
.dd-header .links{margin-top:14px;position:relative;z-index:1}
.dd-header .links a{
  color:#fff;
  text-decoration:none;
  padding:6px 14px;
  background:rgba(255,255,255,0.15);
  border-radius:20px;
  font-size:0.85rem;
  margin:4px;
  display:inline-block;
  transition:background 0.2s;
}
.dd-header .links a:hover{background:rgba(255,255,255,0.25)}
.dd-card{background:#fff;border:1px solid #e6ecea;border-radius:16px;padding:20px;margin:20px 0;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.dd-card h2{text-align:left;margin:0 0 8px;font-weight:700;font-size:1.25rem;color:#294859}
.dd-card h3{margin:12px 0 8px;font-weight:600;font-size:1rem}

/* Collapsible sections */
.dd-collapse-header{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
  margin:0 !important;
}
.dd-collapse-header:hover{color:#307872}
.dd-collapse-icon{
  font-size:1.4rem;
  font-weight:300;
  color:#307872;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0f7f6;
  border-radius:50%;
  transition:transform 0.2s;
}
.dd-collapsible.collapsed .dd-collapse-icon{transform:rotate(0deg)}
.dd-collapsible.collapsed .dd-collapse-icon::before{content:"+"}
.dd-collapsible:not(.collapsed) .dd-collapse-icon::before{content:"\2212"}
.dd-collapse-icon{font-size:0} /* hide the original text */
.dd-collapse-icon::before{font-size:1.2rem}
.dd-collapse-content{
  overflow:hidden;
  transition:max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
  max-height:5000px;
  opacity:1;
  margin-top:12px;
}
.dd-collapsible.collapsed .dd-collapse-content{
  max-height:0;
  opacity:0;
  margin-top:0;
}
.dd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dd-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* Item Cards with Images - Elegant Design */
.dd-items-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.dd-item-card{
  border:1px solid #e8eeec;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  transition:all 0.25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  position:relative;
}
.dd-item-card:hover{
  border-color:#307872;
  box-shadow:0 8px 24px rgba(48,120,114,0.12);
  transform:translateY(-2px);
}
.dd-item-card.selected{
  border-color:#307872;
  border-width:2px;
  box-shadow:0 8px 28px rgba(48,120,114,0.18);
  transform:translateY(-2px);
}
.dd-item-card.selected::before{
  content:"\2713";
  position:absolute;
  top:12px;
  right:12px;
  width:26px;
  height:26px;
  background:#307872;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  z-index:10;
  box-shadow:0 2px 6px rgba(48,120,114,0.3);
}
.dd-item-image{
  width:100%;
  height:200px;
  background:linear-gradient(135deg, #f8faf9 0%, #f0f4f2 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.dd-item-image::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:40px;
  background:linear-gradient(to top, rgba(0,0,0,0.03), transparent);
  pointer-events:none;
}
.dd-item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}
.dd-item-card:hover .dd-item-image img{
  transform:scale(1.05);
}
.dd-item-image .placeholder{color:#b0bfba;font-size:0.85rem;font-style:italic}
/* NEW badge */
.dd-badge-new{
  position:absolute;
  top:12px;
  left:12px;
  background:#fff;
  color:#e74c3c;
  font-size:0.7rem;
  font-weight:700;
  padding:5px 10px;
  border-radius:6px;
  z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.dd-item-card.selected .dd-badge-new{left:12px;right:auto}
.dd-item-body{padding:16px}
.dd-item-name{
  font-weight:700;
  color:#294859;
  font-size:1rem;
  margin:0 0 6px;
  line-height:1.3;
}
.dd-item-price{
  color:#307872;
  font-weight:700;
  font-size:1.05rem;
  display:flex;
  align-items:baseline;
  gap:4px;
}
.dd-item-price .per{font-weight:500;color:#7a9690;font-size:0.8rem}
.dd-item-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #eef3f1;
}
.dd-item-controls input[type=checkbox]{
  width:22px;
  height:22px;
  accent-color:#307872;
  cursor:pointer;
  border-radius:6px;
}
.dd-item-controls select{
  flex:1;
  padding:8px 10px;
  border:1px solid #d6e2df;
  border-radius:8px;
  font:inherit;
  font-size:0.9rem;
  background:#fff;
  cursor:pointer;
  transition:border-color 0.2s;
}
.dd-item-controls select:hover:not(:disabled){border-color:#307872}
.dd-item-controls select:disabled{background:#f5f7f6;color:#a0b0ab;cursor:not-allowed}
/* Variant dropdown */
.item-variant{
  display:block;
  width:100%;
  margin-top:10px;
  padding:8px 10px;
  font-size:0.85rem;
  border:1px solid #d6e2df;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  transition:border-color 0.2s;
}
.item-variant:hover{border-color:#307872}

/* Order Summary */
.dd-total{background:linear-gradient(135deg,#f5faf8 0%,#eef7f4 100%);border:1px solid #d0e6e0;border-radius:16px;padding:24px;margin:20px 0;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.dd-total h3{margin:0 0 16px;font-size:1.15rem;font-weight:700;color:#294859;border-bottom:1px solid #d0e6e0;padding-bottom:12px}
.dd-summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:0.95rem;color:#5d7a86}
.dd-summary-row span:last-child{font-weight:600;color:#294859}
.dd-summary-total{border-top:2px solid #307872;margin-top:12px;padding-top:14px}
.dd-summary-total span{font-size:1.2rem;font-weight:700;color:#294859}
.dd-summary-total span:last-child{color:#307872}
#orderSummaryItems{margin-bottom:12px}
.summary-item{display:flex;justify-content:space-between;padding:6px 0;font-size:0.9rem;color:#5d7a86}
.summary-item .name{flex:1}
.summary-item .price{font-weight:600;color:#294859}

/* Buttons */
.dd-btn{
  background:linear-gradient(135deg, #307872 0%, #245a56 100%);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:16px 28px;
  cursor:pointer;
  font-weight:700;
  font-size:1.05rem;
  width:100%;
  margin-top:16px;
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(48,120,114,0.25);
}
.dd-btn:hover{
  box-shadow:0 6px 16px rgba(48,120,114,0.35);
  transform:translateY(-1px);
}
.dd-btn:disabled{background:#b0bfba;box-shadow:none;cursor:not-allowed;transform:none}

/* Options/Radio */
.dd-options .opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  border:1px solid #d6e2df;
  border-radius:12px;
  cursor:pointer;
  background:#fff;
  transition:all 0.2s ease;
}
.dd-options .opt:hover{border-color:#307872;background:#f8faf9}
.dd-options .opt input{position:absolute;opacity:0;pointer-events:none}
.dd-options .opt .box{
  width:20px;
  height:20px;
  border:2px solid #307872;
  border-radius:6px;
  display:inline-block;
  position:relative;
  flex:0 0 20px;
  transition:all 0.2s ease;
}
.dd-options .opt input:checked + .box{background:#307872}
.dd-options .opt input:checked + .box::after{content:"\2713";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;color:#fff;font-size:12px}

/* Misc */
.muted{color:#5d7a86}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.hide{display:none}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d6e2df;
  border-radius:10px;
  background:#fff;
  font:inherit;
  transition:border-color 0.2s, box-shadow 0.2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#307872;
  box-shadow:0 0 0 3px rgba(48,120,114,0.1);
}
label{display:block;font-weight:500;color:#294859;font-size:0.9rem}
textarea{min-height:80px;resize:vertical}
.dd-divider{height:1px;background:#e6ecea;margin:16px 0}

/* Form grid for contact section */
.dd-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.dd-field{
  display:block;
  min-width:0;
}
.dd-field label{
  display:block;
  font-size:0.85rem;
  font-weight:500;
  color:#294859;
  margin-bottom:4px;
}
.dd-field label .muted{font-weight:400;font-size:0.8rem}
.dd-field input,
.dd-field select,
.dd-field textarea{
  display:block;
  width:100%;
  padding:8px 10px;
}
.dd-field textarea{min-height:60px}
.dd-field-full{grid-column:1 / -1}
@media (max-width:600px){
  .dd-form-grid{grid-template-columns:1fr}
  .dd-field-full{grid-column:auto}
}

/* Non-veg red */
.dd-nonveg{color:#c0392b !important}

/* Error states */
.dd-card.has-error{border-color:#d32f2f;background:#fff5f5}
.dd-error{color:#d32f2f;font-size:0.9rem;margin:4px 0 8px;font-weight:600}
.dd-error-icon{font-weight:700;font-size:1rem}

/* Notification */
#ddNotice{position:fixed;right:16px;top:16px;z-index:9999;opacity:0;transform:translateY(-6px);transition:all .2s ease}
#ddNotice.show{opacity:1;transform:translateY(0)}
#ddNotice .inner{background:#fff;border:1px solid #e6ecea;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:12px 16px;display:flex;gap:10px;align-items:center}
#ddNotice .title{color:#307872;font-weight:600}
#ddNotice .close{margin-left:8px;background:#307872;color:#fff;border:0;border-radius:6px;padding:4px 10px;cursor:pointer;font-weight:600}

/* Responsive */
@media (max-width: 768px) {
  .dd-wrap{padding:0 12px}
  .dd-items-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .dd-grid3{grid-template-columns:1fr 1fr}
  .dd-item-image{height:140px}
}
@media (max-width: 600px) {
  .dd-items-grid{grid-template-columns:1fr;gap:12px}
  .dd-grid2{grid-template-columns:1fr}
  .dd-grid3{grid-template-columns:1fr}
  .dd-options .opt .txt{line-height:1.4}
  .dd-options .opt .box{margin-top:2px}
  .dd-item-card{display:flex;flex-direction:row}
  .dd-item-image{width:120px;height:auto;min-height:120px;flex-shrink:0}
  .dd-item-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:visible}
  .dd-item-name{word-wrap:break-word;overflow-wrap:break-word}
  .dd-item-card.selected::before{top:8px;right:auto;left:8px}
}