/*
 Theme Name:   Kadence Child
 Theme URI:    https://www.orangepos.nl
 Description:  OrangePOS Ticketing
 Author:       Fatih Cig
 Template:     kadence
 Version:      1.0.0
*/
button, .button, .wp-block-button__link, .wp-element-button, input[type=button], input[type=reset], input[type=submit] {
    font-size: 17px;
}

input[type="number"].tc-wb-quantity-selector {
	max-width: 3em;

}

table tbody tr {
    background-color: #f9fafb;
}

table tbody tr:nth-child(odd) {
    background-color: #f5f5f5;
	opacity: 0.8;
}


td{
	padding: 10px; /* Voeg wat padding toe voor de cellen */
	width: auto;
}


.added_to_cart wc-forward{
	text-align:center;
}

.hide-on-mobile {
        display: block; 
    }





/* ===== Tickera -> cards (mooi & compact) ===== */
@media (max-width: 768px) {
  :root{
    --tc-radius: 18px;
    --tc-border: #e9ecf2;
    --tc-shadow: 0 10px 24px rgba(2,6,23,.08);
    --tc-muted: #6b7280;
    --tc-accent: #8B5E2A;          /* <- jouw merk/accentkleur hier */
    --tc-accent-dark: #734b21;     /* hover */
  }

  /* basis */
  .tickera table.event_tickets,
  .tc_wb_event table,
  .event_tickets table {
    width: 100%;
    border: 0;
    background: transparent;
  }
  .tickera table.event_tickets thead,
  .tc_wb_event table thead,
  .event_tickets table thead { display: none; }

  .tickera table.event_tickets,
  .tickera table.event_tickets tbody,
  .tickera table.event_tickets tr,
  .tickera table.event_tickets td,
  .tc_wb_event table,
  .tc_wb_event table tbody,
  .tc_wb_event table tr,
  .tc_wb_event table td,
  .event_tickets table,
  .event_tickets table tbody,
  .event_tickets table tr,
  .event_tickets table td {
    display: block; width: 100%;
  }

  /* card */
  .tickera table.event_tickets tr,
  .tc_wb_event table tr,
  .event_tickets table tr {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 16px 16px 14px;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    background: linear-gradient(180deg,#ffffff, #fbfcff);
    box-shadow: var(--tc-shadow);
  }

  .tickera table.event_tickets td,
  .tc_wb_event table td,
  .event_tickets table td {
    padding: 10px 0;
    border-bottom: 1px dashed #eef1f6;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }
  .tickera table.event_tickets td:last-child,
  .tc_wb_event table td:last-child,
  .event_tickets table td:last-child { border-bottom: 0; }

  /* ------- HEADER: titel groot + thumbnail rechtsboven ------- */

  /* Titel als header */
  .tickera table.event_tickets td:nth-child(3),
  .tc_wb_event table td:nth-child(3),
  .event_tickets table td:nth-child(3) {
    order: -1;
    border-bottom: 1px solid #f1f4f9;
    padding: 6px 0 14px;
  }
  .tickera table.event_tickets td:nth-child(3)::before,
  .tc_wb_event table td:nth-child(3)::before,
  .event_tickets table td:nth-child(3)::before { display: none; }
  .tickera table.event_tickets td:nth-child(3) *,
  .tc_wb_event table td:nth-child(3) *,
  .event_tickets table td:nth-child(3) * {
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2px;
  }

  /* Thumbnail: uit 1e cel, zwevend rechtsboven */
  .tickera table.event_tickets tr { padding-top: 82px; } /* ruimte voor foto */
  .tickera table.event_tickets td:nth-child(1),
  .tc_wb_event table td:nth-child(1),
  .event_tickets table td:nth-child(1){
    height: 0; padding: 0; border: 0; /* rij visueel verbergen */
  }
  .tickera table.event_tickets td:nth-child(1)::before,
  .tc_wb_event table td:nth-child(1)::before,
  .event_tickets table td:nth-child(1)::before { display: none; }
  .tickera table.event_tickets td:nth-child(1) img,
  .tc_wb_event table td:nth-child(1) img,
  .event_tickets table td:nth-child(1) img {
    position: absolute; right: 14px; top: 14px;
    width: 84px; height: 84px; object-fit: cover;
    border-radius: 12px;
  }

  /* Info-knop: chip linksboven, geen aparte rijlabeling */
  .tickera table.event_tickets td:nth-child(2),
  .tc_wb_event table td:nth-child(2),
  .event_tickets table td:nth-child(2) {
    height: 0; padding: 0; border: 0;
  }
  .tickera table.event_tickets td:nth-child(2)::before,
  .tc_wb_event table td:nth-child(2)::before,
  .event_tickets table td:nth-child(2)::before { display: none; }
  .tickera table.event_tickets .info-button,
  .tc_wb_event table .info-button,
  .event_tickets table .info-button {
    position: absolute; left: 14px; top: 14px;
    width: 24px; height: 24px; border-radius: 999px;
    border: 0; background: var(--tc-accent); color: #fff; font-weight: 800;
    box-shadow: 0 6px 14px rgba(139,94,42,.28);
	margin: 25px 0px;
  }

  /* ------- Labels voor de overige rijen ------- */
  .tickera table.event_tickets td::before,
  .tc_wb_event table td::before,
  .event_tickets table td::before {
    font-weight: 600;
    color: var(--tc-muted);
    flex: 0 0 44%;
    content: attr(data-label);
  }

  /* Label-teksten per kolom (pas desnoods aan je volgorde) */
  .tickera table.event_tickets td:nth-child(4)::before,
  .tc_wb_event table td:nth-child(4)::before,
  .event_tickets table td:nth-child(4)::before { content: "Prijs"; }
  .tickera table.event_tickets td:nth-child(5)::before,
  .tc_wb_event table td:nth-child(5)::before,
  .event_tickets table td:nth-child(5)::before { content: "Aantal"; }
  .tickera table.event_tickets td:nth-child(6)::before,
  .tc_wb_event table td:nth-child(6)::before,
  .event_tickets table td:nth-child(6)::before { content: "Winkelwagen"; }

  /* Prijs prominent */
  .tickera table.event_tickets td:nth-child(4),
  .tc_wb_event table td:nth-child(4),
  .event_tickets table td:nth-child(4) {
    font-weight: 800; 
  }

  /* Aantal input strak */
  .tickera table.event_tickets td:nth-child(5) input[type="number"],
  .tickera table.event_tickets td:nth-child(5) select,
  .tc_wb_event table td:nth-child(5) input[type="number"],
  .tc_wb_event table td:nth-child(5) select,
  .event_tickets table td:nth-child(5) input[type="number"],
  .event_tickets table td:nth-child(5) select {
    max-width: 120px; padding: 10px 12px;
    border: 1px solid var(--tc-border); border-radius: 10px; font-size: 16px;
    background: #fff;
  }

  /* Koop-knop full width en mooi */
  .tickera table.event_tickets td:nth-child(6) { padding-top: 4px; }
  .tickera table.event_tickets td:nth-child(6) > *,
  .tc_wb_event table td:nth-child(6) > *,
  .event_tickets table td:nth-child(6) > * { width: 100%; text-align: center; }

  .tickera table.event_tickets td:nth-child(6) a,
  .tickera table.event_tickets td:nth-child(6) button,
  .tc_wb_event table td:nth-child(6) a,
  .tc_wb_event table td:nth-child(6) button,
  .event_tickets table td:nth-child(6) a,
  .event_tickets table td:nth-child(6) button {
    display: inline-block; width: 100%; padding: 13px 14px;
    border-radius: 12px; border: 0; font-weight: 800;
    background: var(--tc-accent); color: #fff !important;
    box-shadow: 0 8px 18px rgba(139,94,42,.25);
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
  }
  .tickera table.event_tickets td:nth-child(6) a:hover,
  .tickera table.event_tickets td:nth-child(6) button:hover,
  .tc_wb_event table td:nth-child(6) a:hover,
  .tc_wb_event table td:nth-child(6) button:hover,
  .event_tickets table td:nth-child(6) a:hover,
  .event_tickets table td:nth-child(6) button:hover {
    background: var(--tc-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(115,75,33,.3);
  }
}

/* Foto rechtsboven als thumbnail + schaduw (mobiel) */
@media (max-width: 768px) {
  /* de rij wordt het positioneringsanker */
  .tickera table.event_tickets tr { 
    position: relative; 
    padding-top: 96px; /* ruimte bovenin voor de foto */
  }

  /* de daadwerkelijke afbeelding */
  .tickera table.event_tickets img.wb_ticket_image {
    position: absolute !important;
    right: 14px;
    top: 14px;
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(2,6,23,.12) !important;
    display: block;
    z-index: 1;
  }

  /* het linkje om de foto heen niet laten ‘breken’ */
  .tickera table.event_tickets a.lightbox-link { 
    display: block; 
  }

  /* (optioneel) de cel die de foto bevat zo plat mogelijk maken
     – voor het geval daar nog padding/border op zit.
     Probeer beide eerste kolommen als fallback. */
  .tickera table.event_tickets td:nth-child(1),
  .tickera table.event_tickets td:nth-child(2) {
    /*padding: 0px 0px 10px 0px !important;*/
	margin: 25px 0px 0px 0px;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* Titel/tekst mag niet onder de thumbnail vallen */
@media (max-width: 768px) {
  /* in de rij die een wb_ticket_image bevat: geef alle cellen extra rechter-ruimte */
  .tickera table.event_tickets tr:has(img.wb_ticket_image) td {
    /* 88px (thumb) + 2×16px (gutter) ≈ 120px */
    padding-right: 10px !important;
  }

  /* optioneel: voor rijen met de knop/qty/prijs weer normale padding */
  .tickera table.event_tickets tr:has(img.wb_ticket_image) td:has(.button),
  .tickera table.event_tickets tr:has(img.wb_ticket_image) td:has(.quantity),
  .tickera table.event_tickets tr:has(img.wb_ticket_image) td.price {
    padding-right: 5px !important;
  }
}

/* ============ MOBIEL (header weg + prijs rechts) ============ */
@media (max-width: 768px) {

  /* Verberg de kolomkoppen/thead compleet */
  .tickera table.event_tickets thead {
    display: none !important;
  }

  /* Sommige templates zetten koppen als eerste rij in tbody -> verberg die ook */
  .tickera table.event_tickets tbody tr.tc_event_table_head,
  .tickera table.event_tickets tbody tr.tc_table_header,
  .tickera table.event_tickets tbody tr:first-child:has(th) {
    display: none !important;
  }

  /* PRIJSCEL rechts uitlijnen */
  /* (meest voorkomende Tickera/Woo selectors meepakken) */
  .tickera table.event_tickets td.price,
  .tickera table.event_tickets td.tc_price,
  .tickera table.event_tickets td.ticket_price,
  .tickera table.event_tickets tr:has(td.price) td:last-child,
  .tickera table.event_tickets tr:has(td.tc_price) td:last-child {
    text-align: right !important;
    font-weight: 700;
  }

  /* Optioneel: klein “label links – waarde rechts” effect voor de Prijs-rij */
  .tickera table.event_tickets tr:has(td.price),
  .tickera table.event_tickets tr:has(td.tc_price) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .tickera table.event_tickets tr:has(td.price) td,
  .tickera table.event_tickets tr:has(td.tc_price) td {
    border: none; /* laat je eigen scheidingslijnregels hierop desgewenst staan */
  }
   
  .tickera table.event_tickets td:nth-child(6)::before, .tc_wb_event table td:nth-child(6)::before, .event_tickets table td:nth-child(6)::before {
    content: "Winkelwagen";
	display: none;
  }
  
  .tickera table.event_tickets td:nth-child(6) a, .tickera table.event_tickets td:nth-child(6) button, .tc_wb_event table td:nth-child(6) a, .tc_wb_event table td:nth-child(6) button, .event_tickets table td:nth-child(6) a, .event_tickets table td:nth-child(6) button {
    margin-top: 10px;
   }
  
  .woocommerce a.added_to_cart {
    display: inline-flex;
    background: rgba(0, 0, 0, 0);
    padding: .5em 0 .5em .3em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: .05em;
    color: inherit;
    font-size: 100%;
  }

  input[type="number"].tc-wb-quantity-selector {
	max-width: 3.5em!important;

	margin: auto;
  }
  
}


:root{ --op-accent:#8a5c2c; } /* jouw oranje/bruin tint */

/* Titel vóór de betaalmethodes */
.op-pay-title{
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--op-brown);
  font-weight: 800;
  text-transform: uppercase;
}

.op-pay-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #f2e7dd;
  margin: 8px auto 0;
  border-radius: 3px;
}

/* Titel Je Bestelling uitzetten */
form.checkout #order_review_heading {
  display: none;
}

/* Button bijwerken uitzetten */
.op2-update {
  display: none;
}

/* Couponcodes uitzetten */
.woocommerce .woocommerce-info {
  display: none;
}

/* Titel Factuurgegevens uitzetten */
.woocommerce-billing-fields > h3{
  display:none !important;
}


/*Uitlijning betaalmethodes */
.woocommerce-checkout #payment .wc_payment_methods {
  grid-template-columns: none!important;
}


/* Lijst als nette tiles */
.woocommerce-checkout #payment .wc_payment_methods{
  display: grid;
  gap: 12px;
}
@media (min-width: 700px){
  .woocommerce-checkout #payment .wc_payment_methods{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* Elk item = kaart, met rustig logo en highlight bij selectie */
.woocommerce-checkout #payment .wc_payment_methods > li{
  list-style: none;
  padding: 0;
  border: none;
  background: transparent;
}

.woocommerce-checkout #payment .wc_payment_methods > li input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.woocommerce-checkout #payment .wc_payment_methods > li label{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .05s;
  cursor: pointer;
}

.woocommerce-checkout #payment .wc_payment_methods > li label:hover{
  border-color: #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.woocommerce-checkout #payment .wc_payment_methods > li input[type="radio"]:checked + label{
  border-color: var(--op-accent);
  box-shadow: 0 8px 22px rgba(138,92,44,.15);
}

/* Logo’s rustig en gelijkmatig */
.woocommerce-checkout #payment .wc_payment_methods > li label img{
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Inhoud (payment_box) netjes binnen de kaart */
.woocommerce-checkout #payment .wc_payment_methods > li .payment_box{
  margin: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 14px 14px;
  background: #fcfcfc;
}

/* ‘Plaats bestelling’ knop zachter in lijn met design */
.woocommerce-checkout #payment #place_order{
  border-radius: 10px;
  font-weight: 700;
}


/* ===== OP2 – tickets als mooie cards (mobiel) ===== */
@media (max-width: 560px){
  /* elke row wordt een card */
  .op2-block .op2-row{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name  price"
      "qty   qty";
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid #f0f2f4;
    border-radius: 16px;
    background:#fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
  }
  .op2-block .op2-row + .op2-row{ margin-top:12px; }

  /* titel linksboven */
  .op2-block .op2-name{
    grid-area:name;
    font-weight:700;
    font-size:16px;
    line-height:1.3;
    color:#1f2937;
  }

  /* prijs als badge rechtsboven */
  .op2-block .op2-price{
    grid-area:price;
    justify-self:end;
    align-self:start;
    font-weight:800;
    font-variant-numeric: tabular-nums;
    background:#fff3e0;      /* zacht oranje */
    color:#925b1a;            /* jouw oranje/bruin */
    padding:6px 10px;
    border-radius:999px;
    line-height:1;
    box-shadow: inset 0 0 0 1px rgba(146,91,26,.08);
  }

  /* qty als grote pill onderaan */
  .op2-block .op2-qty{
    grid-area:qty;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px;
    background:#f7f7f8;
    border:1px solid #e9edf0;
    border-radius:999px;
    width:max-content;
  }

  /* plus/min – werk zowel met .op-plus/.op-minus als generieke buttons */
  .op2-block .op2-qty .op-plus,
  .op2-block .op2-qty .op-minus,
  .op2-block .op2-qty button{
    width:40px;height:40px;
    border:0;border-radius:999px;
    background:#8a5a2c; color:#fff;
    font-size:20px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(138,90,44,.25);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition: transform .06s ease, filter .2s ease;
  }
  .op2-block .op2-qty .op-plus:active,
  .op2-block .op2-qty .op-minus:active,
  .op2-block .op2-qty button:active{ transform:scale(.96); }

  /* zet een +/– als de knoppen leeg zijn */
  .op2-block .op2-qty .op-minus:empty::before{ content:"–"; }
  .op2-block .op2-qty .op-plus:empty::before{ content:"+"; }

  /* number input netjes en zonder browser-pijltjes */
  .op2-block .op2-qty input[type=number]{
    width:48px; text-align:center;
    font-weight:700; font-size:16px;
    border:0; background:transparent; outline:none;
  }
  .op2-block .op2-qty input[type=number]::-webkit-outer-spin-button,
  .op2-block .op2-qty input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none; margin:0;
  }
  .op2-block .op2-qty input[type=number]{ -moz-appearance:textfield; }
}


/* Maak de content full-width in Kadence */
.site-main .content-area,
.site-main .content-wrap,
.entry-content-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* WooCommerce / ticketing inhoud ook niet knijpen */
.woocommerce,
.woocommerce-checkout,
.woocommerce-page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Optioneel: wat binnenmarge zodat het niet tegen de rand plakt */
.site-main .content-area,
.site-main .content-wrap,
.entry-content-wrap {
    padding-left: 20px;
    padding-right: 20px;
}


@media screen and (min-width: 1025px) {
    form.checkout .col2-set {
        width: 100%;
		padding-right: 0px;
    }
}

@media screen and (min-width: 1025px) {
    form.checkout .woocommerce-checkout-review-order {
        width: 100%;
		padding-left: 0px;
    }
}

.entry-hero-container-inner .entry-header {
    padding-top: 70px;
}

.woocommerce form .form-row label {
    font-size: 85%;
}