/* =========================================================================
   order.html — page-specific styles (Custom Song Order Form)
   Load AFTER css/site.css. Header, menus and footer come from site.css.
   ========================================================================= */

/* This page uses slightly rounder corners and a narrower 840px form column */
:root{ --radius:8px; }
.page-main .wrap{ max-width:840px; padding:0 24px; }

/* site.css turns every .fa-solid/.fas into a 1em mask icon (only arrow, chevron,
   close and music are defined). The icons below are drawn by the Font Awesome CDN
   this page still loads, so give them back their normal glyph. */
.fa-lock,.fa-info-circle{
  width:auto;
  height:auto;
  background-color:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  vertical-align:baseline;
  flex:initial;
}

/* Page Content */
.page-main{ padding: 50px 0 80px; }

.page-header{ text-align: center; margin-bottom: 35px; }

.page-header h1{ font-size: clamp(30px, 4vw, 42px); margin-bottom: 10px; }

.page-header p{ color: var(--muted); font-size: 16px; max-width: 600px; margin: 0 auto; }

.order-container{
  background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.section-title{ font-size: 20px; color: var(--gold-soft); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); display:flex; justify-content: space-between; align-items:center; }

.section-block{ margin-bottom: 35px; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.form-field{ margin-bottom: 20px; }

.form-field label{ display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 8px; color: var(--cream); }

.req{ color: var(--rust); }

.form-field input, .form-field select, .form-field textarea{
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--cream);
  padding: 13px 16px; border-radius: var(--radius); font-size: 15px; font-family: var(--body);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 161, 61, 0.15);
}

.form-field textarea{ resize: vertical; min-height: 110px; }

.rel-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }

.rel-option{
  background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: var(--radius);
  text-align: center; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s;
}

.rel-option:hover{ border-color: var(--line-strong); }

.rel-option input{ display: none; }

.rel-option.selected{ border-color: var(--gold); background: rgba(227, 161, 61, 0.1); color: var(--gold-soft); }

.pricing-stack{ display: flex; flex-direction: column; gap: 12px; }

.pricing-card{
  display: flex; align-items: flex-start; justify-content: space-between; background: var(--bg);
  border: 1px solid var(--line); padding: 16px 20px; border-radius: var(--radius); cursor: pointer;
  transition: all 0.2s;
}

.pricing-card:hover{ border-color: var(--line-strong); }

.pricing-card input{ accent-color: var(--gold); margin-top: 4px; }

.pricing-info{ display: flex; flex-direction: column; margin-left: 14px; flex: 1; }

.pricing-info strong{ font-size: 15.5px; color: var(--cream); }

.pricing-info small{ color: var(--muted); font-size: 13.5px; margin-top: 2px; }

.pricing-price{ font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--gold); white-space: nowrap; }

.pricing-card.selected{ border-color: var(--gold); background: var(--bg-panel-2); }

.addon-card{
  display: flex; align-items: center; justify-content: space-between; background: var(--bg);
  border: 1px solid var(--line); padding: 14px 20px; border-radius: var(--radius); cursor: pointer;
  margin-bottom: 10px; transition: all 0.2s;
}

.addon-card:hover{ border-color: var(--line-strong); }

.addon-card input{ accent-color: var(--gold); width: 18px; height: 18px; }

.addon-left{ display: flex; align-items: center; gap: 14px; }

.summary-box{
  background: var(--bg-panel-2); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 24px; margin-top: 30px; margin-bottom: 25px;
}

.summary-row{ display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; color: var(--muted); }

.summary-total{ display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 20px; font-family: var(--display); font-weight: 600; color: var(--cream); }

.summary-total span:last-child{ color: var(--gold); }

.btn-submit{
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--gold); color: #1B1206; padding: 18px; border-radius: var(--radius);
  font-size: 17px; font-weight: 600; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s;
}

.btn-submit:hover{ background: var(--gold-soft); transform: translateY(-1px); }

.notice-box{
  background: rgba(227, 161, 61, 0.08); border-left: 3px solid var(--gold); padding: 12px 16px;
  font-size: 13.5px; color: var(--muted); border-radius: 4px; margin-top: 16px; text-align: center;
}

@media (max-width:768px){
.order-container{ padding: 20px; }
.form-row{ grid-template-columns: 1fr; gap: 0; }
.rel-grid{ grid-template-columns: repeat(2, 1fr); }
}