﻿html body div .cInvoiceMode .hideInInvoiceMode { display:none;}
html body div .cAuctionMode .hideInAuctionMode { display: none; }
.showInAuctionMode { display: none; }
.cAuctionMode .showInAuctionMode { display: block; }

/*.deliveryEventName, .delivery legend{font-weight:bold;}
.deliveryEventName {margin:5px 0;display:block;*/ /*float:left;*/ /*padding:3px 10px;}
.deliveryName { display:block; text-align:start;}
.delivery input {*//*float:left;*//*margin:2px 5px 0 0;}
.cDeliveryMobileContainer { border-top:1px dotted; padding:20px 10px 10px;}
.cDeliveryMobileContainer input { float: none; }
.deliveryCharge {font-weight:bold; float :right;}
.deliveryComment {display:block; text-align:start; color:#A15927; font-size:85%; margin-left:40px;}
body .delivery table {clear:both; margin-bottom:5px; margin-left:0;margin-right:0; width:auto;}*/
/* ===== Delivery section – modern look (no HTML changes) ===== */

/* Container & header */
.ui-widget.ui-widget-content.subModule { padding: 1rem; border-radius: 14px; /* subtle universal outline & tiny lift derived from current text color */ border: 1px solid color-mix(in srgb, currentColor 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent) inset, 0 1px 1px color-mix(in srgb, black 12%, transparent); }
.shoppingCardHeader.ColTextHighlight,
.secHeader.ColTextHighlight { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-weight: 700; /* draw an accent line using the theme highlight */ border-bottom: 2px solid var(--ColTextHighlight, currentColor); padding-bottom: .35rem; }
.shoppingCardHeader.ColTextHighlight { margin-bottom:40px !important;}
    .shoppingCardHeader.ColTextHighlight>a { margin-left: auto; } 
    /* Error summaries/messages (use your existing classes) */
    /*.delivery .ui-state-error { border: 1px solid color-mix(in srgb, var(--ColTextHighlight, currentColor) 65%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent); color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 90%, currentColor); padding: .6rem .8rem; border-radius: 10px; margin: .5rem 0 0; }*/
    /* Event titles */
    .delivery .deliveryEventName { display: block; font-weight: 600; margin: .75rem 0 .35rem; }

/* Space the radio list rows (keep the table) */
.delivery .deliveryRadioButtonList { width: 100%; border-collapse: separate; border-spacing: 0 .75rem; /* vertical gap between cards */ }
    .delivery .deliveryRadioButtonList td { padding: 0; }

/* Each radio option becomes a “card” (target the span.cRadioV2 > input + label) */
.delivery .cRadioV2 { display: block; position: relative; }
    .delivery .cRadioV2 input[type="radio"] { position: absolute; inset: 0 0 0 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; opacity: 0; }
    .delivery .cRadioV2 label { display: block; position: relative; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 12px; padding: .95rem 1rem .8rem 2.75rem; /* left room for custom bullet */ transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .02s ease; background: color-mix(in srgb, currentColor 3%, transparent); /* faint surface from current text color */ }

        /* Hover/focus/active states (use theme highlight) */
        .delivery .cRadioV2 label:hover { border-color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 45%, transparent); }
    .delivery .cRadioV2 input[type="radio"]:focus-visible + label { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent), 0 0 0 1px var(--ColTextHighlight, currentColor) inset; }
    .delivery .cRadioV2 input[type="radio"]:active + label { transform: translateY(1px); }

    /* Checked state */
    .delivery .cRadioV2 input[type="radio"]:checked + label { border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 1px var(--ColTextHighlight, currentColor) inset, 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 30%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 8%, transparent); }

    /* Custom radio “bullet” using the existing .checkmark span */
    .delivery .cRadioV2 label .checkmark { position: absolute; left: 1rem; top: 1.05rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); background: transparent; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
    .delivery .cRadioV2 input[type="radio"]:checked + label .checkmark { border-color: var(--ColTextHighlight, currentColor); background: radial-gradient(var(--ColTextHighlight, currentColor) 50%, transparent 52%); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); }

    /* Layout of name/price on the first row inside the label */
    .delivery .cRadioV2 label .cDeliveryNameContainer { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }

/* Typography inside each card */
.delivery .deliveryName { font-weight: 700; }
.delivery .deliveryCharge { font-weight: 600; }
    /*.delivery .deliveryCharge.requiresShipping { color: var(--ColTextHighlight, currentColor); }*/
.delivery .deliveryComment { display: block; margin-top: .4rem; opacity: .85; font-size: .95em; }

/* Inline questions that appear under the chosen method */
.delivery .questions, .delivery .cDeliveryQuestion { margin-top: .5rem; }
/*.delivery .cCheckoutQuestion.row select,
.delivery .cCheckoutQuestion.row input[type="text"] { width: 100%; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 10px; padding: .55rem .7rem; }
    .delivery .cCheckoutQuestion.row select:focus-visible,
    .delivery .cCheckoutQuestion.row input[type="text"]:focus-visible { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); }
*/
.cCashDescription { display:none;}
/* Mobile spacing */
@media (max-width: 640px) { .delivery .cRadioV2 label { padding-left: 2.5rem; }
    .delivery .deliveryRadioButtonList { border-spacing: 0 .6rem; }
}

.delivery .ui-state-error{display:block; padding:5px;}
/*.delivery .errorMsg {float:right;}
.delivery .errorMsg >img {display:none;}*/
.cDeliveryQuestion {display:none;}


/*Price Container*/
/*.priceContainer {padding:10px;}
.priceContainer > .row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items:baseline;
  gap:10px;
  flex-basis:100%;
  justify-content:flex-end;
}
.priceContainer > .row >.col1{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  text-align:end;
}
.priceContainer > .row >.col2{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-basis: 100px;
}
.priceContainer p{line-height:160%; clear:both;}
.p1riceContainer .priceLabel {display:block;float:left; margin-left:100px;text-align:end;padding-right:10px;}
.priceContainer .subprice {font-weight:bold;display:inline-block;}
.priceContainer .totalPrice {font-weight:bold;display:inline-block;}
.priceContainer input.subprice {width:50px;}
#cGiftCardBalance {padding:5px 0;font-size:85%;}
.cGiftCard,
.promotionCode {padding:10px 10px 10px;}
*/
/* ===== Price section – modernized (no HTML changes) ===== */

/* Rows → tidy two-column grid: label (start) / value (end) */
html body .priceContainer .row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, auto); align-items: center; gap: 1rem; margin: .5rem 0; padding:0;line-height:unset;}
    html body .priceContainer .row * { margin:0;}
    .priceContainer .col1 { justify-self: start;display:grid;gap:10px; }
.priceContainer .col2 { justify-self: end; }

/* Labels & amounts */
.priceContainer .priceLabel { font-weight: 600; }
.priceContainer .subprice,
.priceContainer .totalPrice { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; text-align: end; /* logical: right in LTR, left in RTL */ display: inline-block; }

/* Numeric inputs (balance, extra fee, discount) */
.priceContainer input.subprice { text-align: end; /* logical number alignment */ width: 70px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 10px; padding: .45rem .6rem; /*background: color-mix(in srgb, currentColor 3%, transparent);*/ }
    .priceContainer input.subprice:focus-visible { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent), 0 0 0 1px var(--ColTextHighlight, currentColor) inset; }

    /* Deduction numbers (discount/balance) – subtle emphasis */
    .priceContainer .subpriceDeduction,
    .priceContainer input.subprice.subpriceDeduction { color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 70%, currentColor); }


/* Service charge toggle row */
.priceContainer .applyServiceCharge { display: inline-flex; align-items: center; gap: .5rem; }
    .priceContainer .applyServiceCharge input[type="checkbox"] { accent-color: var(--ColTextHighlight, currentColor); }

/* Promo code & gift card blocks */
.priceContainer .promotionCode,
.priceContainer .cGiftCard { margin-top: .75rem; padding: .6rem .75rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 10px; background: color-mix(in srgb, currentColor 3%, transparent); }
    .priceContainer .promotionCode label,
    .priceContainer .cGiftCard label { font-weight: 600; }
    .priceContainer .promotionCode input[type="text"],
    .priceContainer .cGiftCard input[type="text"] { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 10px; padding: .45rem .6rem; }
        /*.priceContainer .promotionCode input[type="text"]:focus-visible,
        .priceContainer .cGiftCard input[type="text"]:focus-visible { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent), 0 0 0 1px var(--ColTextHighlight, currentColor) inset; }
*/
/* Totals emphasis */
.priceContainer .totalPrice { font-size: 1.25rem; font-weight: 800; letter-spacing: .2px; }

/* Mobile: stack rows; keep amounts aligned to inline end */
@media (max-width: 640px) {
    .priceContainer .row { grid-template-columns: 1fr; }
    .priceContainer .col2,
    .priceContainer .subprice,
    .priceContainer .totalPrice { justify-self: end; }
}



.subModule {margin-bottom:20px;}
/*.shipping, .billing, .billing + .cardInfo, .cashInfo {max-width:49%; float:left; }
.rtl .shipping,.rtl .billing,.rtl .cardInfo,.rtl .cashInfo{float:right;}
table.cardInfo, .billing+.shipping {float:right; margin-top:0; clear:none;}
.Module .billing td,
.Module .shipping td,
.Module .cardInfo td,
.Module .cashInfo td {padding:5px 3px;vertical-align:top;}
.cardInfo .col1,.billing .col1,.shipping .col1, .cashInfo .col1 {text-align:start;}
.cardInfo tr td,.billing tr td,.shipping tr td, .cashInfo tr td {text-align:start;}
.billing input[type="text"],
.shipping input[type="text"],
.cardInfo input[type="text"],
.cashInfo input[type="text"]{width:155px;}
.billing .cIntStateDrop,
.shipping .cIntStateDrop,
.billing .cIntCountry,
.shipping .cIntCountry {width:165px;}
.creditCardImg {vertical-align:top; padding:8px;}
.shipping {clear:left;margin-top:20px;}
*/
/* =========================================================
   Billing / Card Info / Shipping — modern tables (no HTML changes)
   ========================================================= */

/* Shared container card + header */
.borderSpacing *{box-sizing:border-box;}

/* Make table behave like a spaced form */
body table.borderSpacing {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .75rem;        /* vertical gaps between rows */
}
.borderSpacing th {
  padding: 0 .25rem .5rem;
}

/* Two-column layout */
.borderSpacing .col1 { /*width: 36%; */padding: 0 10px 0 0; vertical-align: middle; white-space:nowrap;}
.borderSpacing .col2 {/* width: 64%;*/ padding: 0; }

/* Labels */
.borderSpacing .col1 label { font-weight: 600; display: inline-block; }

/* Multiple controls in one cell (e.g., state text + dropdown, exp month + year) */
.borderSpacing .col2 > *:visible + * { margin-inline-start: .6rem; }

/* Hints and validation bits */
.borderSpacing .hint { margin: .35rem 0 0; opacity: .85; font-size: .95em; }
.borderSpacing .ui-state-error,
.borderSpacing .validator,
.borderSpacing .errorMsg {
  display: inline-block;
  margin-inline-start: .5rem;
  border: 1px solid color-mix(in srgb, var(--ColTextHighlight, currentColor) 65%, transparent);
  background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent);
  color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 90%, currentColor);
  padding: .25rem .45rem; border-radius: 8px;
  line-height:unset;
}

/* ---------------- Billing-specific niceties ---------------- */
.billing .cInternationalAddress select.cIntStateDrop,
.shipping .cInternationalAddress select.cIntStateDrop {
  inline-size: auto; min-inline-size: 12ch;
}
.billing .creditCardImg { vertical-align: middle; margin-inline-start: .35rem; }

/* Phone input monospace alignment helps readability */
.borderSpacing input[type="tel"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------------- Credit Card block ---------------- */
.cardInfo .creditCardImg { vertical-align: middle; margin-inline-start: .35rem; }

/* Stripe/Square Elements host */
#card-element,
.cardInfo #card-element { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 10px; padding: .65rem .7rem; background: color-mix(in srgb, currentColor 3%, transparent);  min-block-size: 44px;  }

/* CVV tooltip bubble (reuses your .showHint/.hintData pattern) */
.cardInfo .showHint { position: relative; }
.cardInfo .showHint .hintData {
  display: none; position: absolute;
  inset-inline-start: 0; inset-block-end: calc(100% + .4rem);
  z-index: 10; max-inline-size: 28rem;
  padding: .6rem .75rem; border-radius: 10px; line-height: 1.35;
  border: 1px solid var(--ColTextHighlight, currentColor);
  background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent);
  color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 90%, currentColor);
  box-shadow: 0 1px 6px color-mix(in srgb, currentColor 16%, transparent);
}
.cardInfo .showHint:hover .hintData,
.cardInfo .showHint:focus-within .hintData { display: block; }
.cardInfo .showHint .hintData::after {
  content: ""; position: absolute; inset-inline-start: 12px; inset-block-start: 100%;
  border: 6px solid transparent; border-block-start-color: var(--ColTextHighlight, currentColor);
}

/* Card reader pill (if shown) */
.cardInfo .cardReader { display: inline-block; height: 48px; line-height:48px;vertical-align:middle;}
.cardInfo .cardReader .swipeCC {height:44px !important; display: inline-block; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 10px; padding: .2rem .45rem; }

/* Numeric alignment for amounts / zip / cvv */
.borderSpacing input[data-type="zip"],
.borderSpacing input[data-type="cvv"],
.borderSpacing select[data-type="exp-month"],
.borderSpacing select[data-type="exp-year"] {
  text-align: end; /* logical: right in LTR, left in RTL */
}

/* ---------------- Shipping block ---------------- */
/* Nothing special beyond shared rules; this keeps styles consistent */

/* ---------------- Responsive stacking ---------------- */
/*@media (max-width: 800px){
  .borderSpacing .col1 { width: 40%; }
  .borderSpacing .col2 { width: 60%; }
}
*/@media (max-width: 640px){
  /*.borderSpacing tr { display: block; }*/
  .borderSpacing td.col1,
  .borderSpacing td.col2 { display: block; width: 100%; }
    .borderSpacing .col1 { margin-block-end: .25rem; margin-block-start: .75rem; }
  .borderSpacing .col2 > * { max-width: 100%; }
  /* Keep header flex on small screens too */
  .borderSpacing th[colspan="2"] { display: flex; align-items: center; gap: .75rem; }
}

/* ---------------- Validation success/error (optional) ---------------- */
/* If you add .valid /.error classes to inputs */
.borderSpacing input.valid,
.borderSpacing select.valid,
.borderSpacing textarea.valid {
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, currentColor 15%, transparent);
}
.borderSpacing input.error,
.borderSpacing select.error,
.borderSpacing textarea.error {
  border-color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 70%, transparent);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent);
}


.zeroBalanceNote {color: #A15927;}

.total {padding-top:25px; text-align:end; margin-right:7px;clear:both; padding-bottom:10px;}
.total .totalPrice {font-weight:bold;}
.chargeName {padding:10px; margin-top:10px; margin-bottom:10px;}
.cvv {width:240px;}

/*.paymentMetod {padding:10px;font-size:bold;}
.paymentMetod p {line-height:35px; vertical-align:baseline;}
.paymentMetod img {margin: 0 10px 0 0; vertical-align:middle;} 
.paymentMetod label  {line-height:35px; height:35px;vertical-align:baseline;}
*/

/* ===== Payment Method – modern card radios (no HTML changes) ===== */

/* Container & header */
/* Each method is a .cRadioV2 paragraph */
.paymentMetod .cRadioV2 { position: relative; margin: 0 0 .75rem; }

    /* Keep native radios accessible but visually hidden */
    .paymentMetod .cRadioV2 > input[type="radio"] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; opacity: 0; }

    /* The label becomes the card */
    .paymentMetod .cRadioV2 > label { display: flex; align-items: center; gap: .75rem; position: relative; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 12px; padding: .85rem 1rem .85rem 2.75rem; /* left padding leaves room for bullet */ transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .02s ease; background: color-mix(in srgb, currentColor 3%, transparent); cursor: pointer; }

        /* Payment brand logos inside label */
        .paymentMetod .cRadioV2 > label img { height: 20px; width: auto; object-fit: contain; flex: 0 0 auto; display: inline-block; }

        /* Primary label text */
        .paymentMetod .cRadioV2 > label > span { font-weight: 600; }

        /* Hover / focus / active */
        .paymentMetod .cRadioV2 > label:hover { border-color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 45%, transparent); }
    .paymentMetod .cRadioV2 > input[type="radio"]:focus-visible + label { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent), 0 0 0 1px var(--ColTextHighlight, currentColor) inset; }
    .paymentMetod .cRadioV2 > input[type="radio"]:active + label { transform: translateY(1px); }

    /* Checked state */
    .paymentMetod .cRadioV2 > input[type="radio"]:checked + label { border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 1px var(--ColTextHighlight, currentColor) inset, 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 30%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 8%, transparent); }

    /* Custom radio bullet using existing .checkmark span */
    .paymentMetod .cRadioV2 > label .checkmark { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); background: transparent; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
    .paymentMetod .cRadioV2 > input[type="radio"]:checked + label .checkmark { border-color: var(--ColTextHighlight, currentColor); background: radial-gradient(var(--ColTextHighlight, currentColor) 50%, transparent 52%); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); }

    /* “Cash” highlight (when .highlight class present) even before selection */
/*    .paymentMetod .cRadioV2.highlight > label { border-color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 45%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 6%, transparent); }
*/
/* Optional inline hint tooltip (uses your existing .showHint / .hintData) */
/*.paymentMetod .showHint { position: relative; font-weight: 600; }
    .paymentMetod .showHint .hintData { display: none; position: absolute; left: 0; bottom: calc(100% + .4rem); max-width: 28rem; z-index: 10; padding: .6rem .75rem; border-radius: 10px; font-weight: 500; line-height: 1.3; border: 1px solid var(--ColTextHighlight, currentColor); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent); color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 90%, currentColor); box-shadow: 0 1px 6px color-mix(in srgb, black 16%, transparent); }
    .paymentMetod .showHint:hover .hintData,
    .paymentMetod .showHint:focus-within .hintData { display: block; }
    .paymentMetod .showHint .hintData::after { content: ""; position: absolute; left: 12px; top: 100%; border: 6px solid transparent; border-top-color: var(--ColTextHighlight, currentColor); }
*/
/* Cash description field: stays hidden unless the Cash radio is selected */
/*.paymentMetod .cCashDescription { display: none; margin-top: .5rem; }
.paymentMetod .cRadioV2:has(> input[type="radio"]:checked) .cCashDescription { display: block; width: 100%; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 10px; padding: .55rem .7rem; }
    .paymentMetod .cRadioV2:has(> input[type="radio"]:checked) .cCashDescription:focus-visible { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); }
*/
/* Compact on very small screens */
@media (max-width: 520px) {
    .paymentMetod .cRadioV2 > label { padding-left: 2.5rem; }
        .paymentMetod .cRadioV2 > label img { height: 18px; }
}
/* ============================
   Applied Gift Card row (exact markup given)
   Container: #giftCardContainer
   ============================ */

#giftCardContainer { margin-block-start: .75rem; }

    /* Turn each <p class="row"> into a card-like row */
    #giftCardContainer .row { display: flex; align-items: center; gap: .75rem; /* spacing between items */ padding: .75rem 1rem; margin: 0; /* reset default <p> margin */ border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 12px; background: color-mix(in srgb, currentColor 3%, transparent); }

        /* space between multiple gift-card rows */
        #giftCardContainer .row + .row { margin-block-start: .5rem; }

    /* “Gift Card XXXX:” label */
    #giftCardContainer .priceLabel { font-weight: 600; }

        /* Make the gift card number look like a small chip (but keep it a link) */
        #giftCardContainer .priceLabel a { display: inline-block; text-decoration: none; color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; padding: .15rem .5rem; margin-inline-start: .35rem; /* space before the code chip */ border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 8px; background: color-mix(in srgb, currentColor 6%, transparent); transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease; }
            #giftCardContainer .priceLabel a:hover { border-color: var(--ColTextHighlight, currentColor); color: var(--ColTextHighlight, currentColor); }
            #giftCardContainer .priceLabel a:focus-visible { outline: none; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); border-color: var(--ColTextHighlight, currentColor); }

    /* Amount sits at the inline end (right in LTR, left in RTL) */
    #giftCardContainer .subprice { margin-inline-start: auto; /* push amount to the end */ text-align: end; /* logical alignment */ font-weight: 700; font-variant-numeric: tabular-nums; }

        /* Emphasize negative amounts (deductions) using theme highlight */
        #giftCardContainer .subprice[data-amount^="-"],
        #giftCardContainer .cGiftCardEffectiveAmount[data-amount^="-"] { color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 70%, currentColor); }

    /* Remove icon (Font Awesome) behaves like a button */
    #giftCardContainer [role="button"],
    #giftCardContainer .fa-times { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); margin-inline-start: .5rem; cursor: pointer; color: inherit; background: transparent; transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .02s ease, box-shadow .15s ease; }
        #giftCardContainer [role="button"]:hover,
        #giftCardContainer .fa-times:hover { border-color: var(--ColTextHighlight, currentColor); color: var(--ColTextHighlight, currentColor); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 10%, transparent); }
        #giftCardContainer [role="button"]:active,
        #giftCardContainer .fa-times:active { transform: translateY(1px); }
        #giftCardContainer [role="button"]:focus-visible,
        #giftCardContainer .fa-times:focus-visible { outline: none; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); border-color: var(--ColTextHighlight, currentColor); }

        /* Make sure the tiny FA icon isn’t clipped */
        #giftCardContainer .fa-times::before { display: inline-block; }

/* Optional: shrink spacing on very small screens */
@media (max-width: 560px) {
    #giftCardContainer .row { padding: .6rem .75rem; }
}

/*Admin Only*/
.cAdminOnly {white-space:nowrap; font-weight: 600; font-size: .85em; line-height: 1; padding: .2rem .5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent); color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 85%, currentColor); }



.Module .buyCash,.Module .buyCredit, .Module .buyPayPal, .Module .buyFree,.Module .buyOther {display:none;}
div.payCash .buyCash {display:block;}
div.payCredit .buyCredit {display:block;}
div.payPayPal .buyPayPal {display:block;}
div.payCash table.buyCash {display:unset;}
div.payCredit table.buyCredit {display:unset;}
div.payPayPal table.buyPayPal {display:unset;}
div.payFree .buyFree {display:block;}
div.payFree .paymentMetod {display:none;}
div.payOther .buyOther {display:block;}

.buyerInfo {clear:both;}

.checkoutModule th h3 {float:left;}
.rtl .checkoutModule th h3 {float:right;}
.checkoutModule th a {float:right; font-size:80%; clear:right;}

.nsBtn.cValidate{padding-right:35px;}

#swipeDlg > div {margin:20px 10px;}
#swipeDlg input {width:100%;box-sizing:border-box;}

.swipeCC, .swipeID {cursor:pointer;}
img.swipeCC, img.swipeID {border:1px solid #ccc; border-radius:5px;}


.inFastModeCash,
.inFastModeCredit,  
.inFastMode {display:none;}

.fastMode1 .inFastMode,
.fastMode2 .inFastMode {display:block;}

.fastMode1 .inFastModeCash{display:block;}
.fastMode2 .inFastModeCredit{display:block;}

.fastMode1 .notFastMode,
.fastMode2 .notFastMode {display:none;}

.fastMode1 .notFastModeCash {display:none;}

.fastMode2 .notFastModeCredit {display:none;}

.inFastMode.ui-state-highlight {padding:10px; margin:10px;}

body .Module .cFastMode td{padding:10px;}

.cFastMode input {display:none;}
.cFastMode td * {cursor:pointer;}

.questions {margin-top:20px;}
.questions div.row{display:block;}
.questions .eventTitle {font-weight:bold; padding:10px 10px 3px;}
.questions .row>span {clear:both; display:block; padding-bottom:5px;}
.questions .row>span.errorMsg {display:inline;} 
.questions .ticketnumber{font-weight:bold; padding:10px 10px 3px;}
.questions .eventSpecific {margin-left: 10px; padding-left:10px; border-left:1px solid #eee;}
.questions .ticketSpecific {margin-left: 25px; padding-left:10px;border-left:1px solid #eee;}

.secHeader {margin-bottom:10px; text-transform:uppercase; font-size:100%;}
.secHeader i {margin-right:15px;}
.rtl .secHeader i{margin:0 0 0 15px;}
.inTour .highlight { border:5px solid yellow;}
/*.cInsuranceDescription .row { display:block;}*/
/* ================================
   Insurance section – modernized
   Markup root: .cInsurance
   ================================ */


/* Radio group (keep your table, but space rows like cards) */
.cInsurance .insuranceRadioButtonList { width: 100%; border-collapse: separate; border-spacing: 0 .65rem; /* vertical gap between options */ }
    .cInsurance .insuranceRadioButtonList td { padding: 0; }

/* Each option wrapper */
.cInsurance .cRadioV2 { position: relative; display: block; }

    /* Hide native radio visually, keep it accessible */
    .cInsurance .cRadioV2 > input[type="radio"] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; opacity: 0; }

    /* Label becomes the card */
    .cInsurance .cRadioV2 > label { display: block; position: relative; cursor: pointer; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; border-radius: 12px; padding: .85rem 1rem; padding-inline-start: 2.75rem; /* room for the custom bullet */ background: color-mix(in srgb, currentColor 3%, transparent); transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .02s ease; color: inherit; }

        /* Hover / focus / active */
        .cInsurance .cRadioV2 > label:hover { border-color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 45%, transparent); }
    .cInsurance .cRadioV2 > input[type="radio"]:focus-visible + label { outline: none; border-color: var(--ColTextHighlight, currentColor); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent), 0 0 0 1px var(--ColTextHighlight, currentColor) inset; }
    .cInsurance .cRadioV2 > input[type="radio"]:active + label { transform: translateY(1px); }

    /* Checked state */
    .cInsurance .cRadioV2 > input[type="radio"]:checked + label { border-color: var(--ColTextHighlight, currentColor); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 8%, transparent); box-shadow: 0 0 0 1px var(--ColTextHighlight, currentColor) inset, 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 30%, transparent); }

    /* Custom radio bullet (.checkmark in your markup) */
    .cInsurance .cRadioV2 > label .checkmark { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: 1rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); background: transparent; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
    .cInsurance .cRadioV2 > input[type="radio"]:checked + label .checkmark { border-color: var(--ColTextHighlight, currentColor); background: radial-gradient(var(--ColTextHighlight, currentColor) 50%, transparent 52%); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ColTextHighlight, currentColor) 35%, transparent); }

/* Price chip inside the first option */
.cInsurance .cInsuranceSubprice { font-weight: 700; font-variant-numeric: tabular-nums; padding: .15rem .5rem; margin-inline: .5rem; /* keep spacing around chip */ border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }

/* Logo & copy block */
.cInsurance .booking-protect-sales-logo { max-block-size: 28px; inline-size: auto; object-fit: contain; margin-block: .25rem .5rem; }
.cInsurance p { margin: .4rem 0; line-height: 1.5; }

/* Terms link */
.cInsurance a.cInsuranceTerms { color: var(--ColTextHighlight, currentColor); text-decoration-thickness: from-font; text-underline-offset: .15em; }
    .cInsurance a.cInsuranceTerms:hover { text-decoration: underline; }

/* “Important note” list spacing */
.cInsurance ul { margin: .35rem 0 .5rem; padding-inline-start: 1.25rem; }

/* Validation & errors inside this block (theme-tinted) */
.cInsurance .ui-state-error { border: 1px solid color-mix(in srgb, var(--ColTextHighlight, currentColor) 65%, transparent); background: color-mix(in srgb, var(--ColTextHighlight, currentColor) 12%, transparent); color: color-mix(in srgb, var(--ColTextHighlight, currentColor) 90%, currentColor); padding: .6rem .8rem; border-radius: 10px; margin-block: .5rem 0; }

/* Mobile tweaks */
@media (max-width: 640px) {
    .cInsurance .cRadioV2 > label { padding-inline-start: 2.5rem; }
    .cInsurance .insuranceRadioButtonList { border-spacing: 0 .55rem; }
}


.cGiftCard label,
.promotionCode label {
    display:block;
    clear:both;
    margin-top:15px;
    margin-bottom:5px;
}