/* * -- BASE STYLES -- * Most of these are inherited from Base, but I want to change a few. */
html{font-family:'OpenSans',sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body {color:#3c3c3c;text-align:center;margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
p {line-height: 1.6em}
ol li {padding: 0 0 1.5em 0}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
h1{font-size:2em;margin:.67em 0}

.row {display: flex;flex-wrap: wrap;justify-content:center}
.col {width: 100%; /* mobile: full width */}

.header-with-bubbles {
  background: transparent url('../img/banki.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 15vh;
  min-height: 120px;
  width: 100%;
  text-align: center;
  font-family: 'FranziskaOffcPro-Demibold';
  color: #FFF;
  font-size: 3em;
  padding-top: 1.5em;
  line-height: 1em;
  text-shadow: 2px 2px 4px #000;
  z-index: 2;
  margin: 0.25em 0 1em 0
}

.header-with-bubbles p { line-height: 1em;
}

.header-with-bubbles h2, .header-with-bubbles h1 {margin:0;padding:0;font-size:1.2em}

.orange {list-style:none;padding:0;margin:0}
.orange li{padding-left:1em;text-indent:-.9em}
.orange li:before{content:"•";color:#FF6D00;padding-right:8px}
/** -- Layout Styles --*/
.section {margin: 0 auto}
/** -- MENU STYLES -- * Make the menu have a very faint box-shadow. */
.pure-menu-link{font-size:0.9em}	
/*-- BANNER -- * The top banner with the headings. By using a combination of `display: table;` and `display: table-cell;`, we can vertically center the text. */

p.contact {font-size:0.65em;margin-top:2.8em;word-break:break-all;overflow-wrap:break-word}

/*TEL POZ i PION*/
@media (max-width:48em) {
  .mobile-left-other-right {text-align:left;padding:0 0 1em 0.5em}
  .horizontal-spacer {display:none}
  .header-with-bubbles h1 {font-size:1em;line-height:1em}
  .header-with-bubbles {padding-top: 2em;background-attachment: scroll}
  body {padding:0 0.5em 0 0.5em}
}

/*DESKTOP+TABLET*/
@media (min-width:48em) {
  .mobile-left-other-right {text-align:right;padding:3em 2em 1em 0}
  .horizontal-spacer {min-height: 6em;}
  .horizontal-spacer-2em {min-height: 2em;}
}

/*TABLET*/
@media screen and (min-width:48em) and (max-width:90em) {
.tablet-invisible {display:none}
.tablet-enlarged {font-size: 2em}
.tablet-shrinked {font-size: 0.85em}
.horizontal-spacer {display:none}
.horizontal-spacer-2em {display:none}
.header-with-bubbles h1 {font-size:1em;line-height:1em}
}

.footer {background: #FAFAFA;color: #000;text-align:center;width:100%;
padding:2em 0 0.75em 0;	line-height:1.5em;}

@media all and (min-width: 118.7em) {
.banner {height:594px}
#logo-1 {display:block;min-width:215px}
#logo-2 {display:none}
.pure-menu-heading{margin:0;float:left;min-width:215px}
p.contact {font-size:0.82em}
}

@media all and (min-width: 100em) and (max-width:118.69999em) { 
.banner {height:560px;margin:3.2em 0 1em 0}
#logo-1 {display:block;min-width:215px}
#logo-2 {display:none}
.pure-menu-heading{margin:0;float:left;min-width:215px}
p.contact {font-size:0.82em}
}

@media all and (min-width: 75em) and (max-width:99.9999em) { 
.banner {height:520px;margin:3.2em 0 1em 0}
#logo-1 {display:block;min-width:215px}
#logo-2 {display:none}

.pure-menu-heading{margin:0;float:left;min-width:215px}
}		
@media all and (min-width: 62.4em) and (max-width:74.99999em) {
.banner {height:440px;margin:3.2em 0 2em 0}	
#logo-1 {display:block}
#logo-2 {display:none}		

.pure-menu-heading{margin:0;float:left;min-width:215px}	
}
/* -- TABLET MEDIA QUERIES --* On tablets, we want to slightly adjust the size of the banner text and add some vertical space between the various pricing tables */
@media all and (min-width:48em) and (max-width:62.39999em) {	
.banner {height:340px;margin:3.2em 0 2em 0}		
#logo-1 {display:block}
#logo-2 {display:none}

.pure-menu-heading{margin:0;float:left}
}
/* -- PHONE MEDIA QUERIES -- * On phones, we want to reduce the height and font-size of the banner further */
@media all and (min-width:30em) and (max-width:47.9999em) {
div.footer div.col {padding-left:0.5em}
#logo-2 {display:block}
#logo-1 {display:none}

.pure-menu-heading{margin:0px;float:left}

.pure-menu-link,.pure-menu-disabled{padding:0;margin:0}
}
@media all and (max-width:29.999em) {
div.footer div.col {padding-left:1em}
#logo-2 {display:block}
#logo-1 {display:none}
.header-with-bubbles {font-size:1.6em}
.pure-menu-heading{margin:0px;float:left}

.pure-menu-link,.pure-menu-disabled{padding:0;margin:0}
}

/* * -- PRICING TABLE WRAPPER -- * This element wraps up all the pricing table elements */
.pricing-tables {
    margin-bottom: 1em;
    text-align: left;
}

/* * -- PRICING TABLE  -- * Every pricing table has the .pricing-table class */
.pricing-table {
    border: 0;
    margin: 0 0.5em 0;
    padding: 0;
	line-height:1.5em;
}


/* * -- PRICING TABLE LIST -- * Each pricing table has a <ul> which is denoted by the .pricing-table-list class */
.pricing-table-list {margin: 0;padding: 0}
/* * -- PRICING TABLE LIST ELEMENTS -- * Styles for the individual list elements within each pricing table */
.pricing-table-list li {padding:0}
/* * -- PRICING TABLE BUTTON -- * Styles for the "Choose" button at the bottom of a pricing table. * This inherits from Pure Button. */
.button-choose {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 2em;
    font-weight: bold;
    position: relative;
    bottom: -1.5em;
}
.information-head {
		color: #FF5912;
		font-family:'FranziskaOffcPro-Demibold';
        margin: 0;
		font-weight:bold;
}

.footer ul li a {
    color: #444;
}
.footer ul li a:hover {
  color: #888;
}

.footer p.footerheader {
  font-weight:bold;font-size:0.75em;margin-bottom:0.35em
}

.footer ul.footerlist {
  list-style:none; padding-inline-start:0;margin:0
}

.footer .col, .footer .col-5-24, .footer .col-7-24, .footer .col-1-8 {
  text-align:left
}

.psycholog-header {
  color:#444;text-shadow:none;font-weight:normal
}

a.more-button {
	background-color: #FF5912;border: 1px solid #FF5912;color: #FFF;padding: 2px 18px 4px 18px;transition: background-color 0.3s;
	text-align: center;  text-decoration: none;  display: inline-block;  font-size: 0.8em;margin:0 0 10px 0;border-radius: 22px
}

a.more-button:hover {
	color: #FF5912;background-color: transparent; border: 1px solid #FF5912
}

a.register-button {
	background-color: transparent;border: 1px solid #FF5912;color: #FF5912;padding: 10px 15px;transition: background-color 0.3s;
      text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;margin: 0px 2px 20px 2px;border-radius: 22px
}

a.register-button:hover {
	background-color: #FF5912;border: 1px solid #FF5912;color: #FFF
}

.orange-box {
	margin:1em;border-radius:6px;font-weight:bold;text-align:center;color:#FF5912;background-color:#FFF;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.gray-box {
	border:1px solid #FFF;border-radius:12px;margin:0 5px;padding:32px 40px;text-align:center;background-color:#F4F4F4
}

.black-box {
	margin:5px;border:1px solid #777;border-radius:12px;padding:10px 20px;background-color:transparent;text-align:left
}

.orange-with-shadow {color: #FF5912;font-family:'FranziskaOffcPro-Demibold';text-shadow:0 0 0 #FF5912;margin:0;}

.faq {
  margin: auto;
  letter-spacing: normal;
}

details {
  margin-bottom: 1em;
  border: 1px solid #BBB;
  border-radius: 8px;
  background: #fff;
  padding: 0.75em 1em;
}

summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s ease-in-out;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details p {
  margin: 0.5em 0 0 1.5em;
}

    form {
      max-width: 500px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    input[type="text"],
    input[type="email"],
	input[type="tel"],
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #BBB;
      border-radius: 30px;
      box-sizing: border-box;
      resize: none;
      font-size: 0.82em;
      outline: none;
      transition: border-color 0.3s;
    }
	
	form>label {
		font-size: 0.82em;
	}
	
	input::placeholder {
		font-size: 0.82em; /* Adjust the size as needed */
	}

    input:focus,
    textarea:focus {
      border-color: #FF5912;
    }

    textarea {
      height: 150px;
      border-radius: 20px;
    }

    .orange-button {
      margin-top: 20px;
      width: 100%;
      padding: 12px;
      background-color: #FF5912;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: background-color 0.3s;
	  border: 1px solid #FF5912;
    }

    .orange-button:hover {
      color: #FF5912;
	  background-color: white;
	  border: 1px solid #FF5912;
    }


    .menu-toggle {
      display: none;
      font-size: 2rem;
      cursor: pointer;
      padding: 0 1rem 0 0;
    }

    .pure-menu {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    @media (max-width: 55em) {
      .menu-toggle {
        display: block;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0 1rem 0 0;
      }
    
      .pure-menu-list {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
      }
    
      body.menu-open .pure-menu-list {
        display: flex;
        text-align: center;
      }
    
      /* Wszystkie podmenu zawsze widoczne */
      .pure-menu-children {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        background-color: transparent;
        padding-left: 1rem;
      }
    
      .pure-menu-has-children > .pure-menu-link:after {
        content: ""; /* usuwamy strzałkę */
      }
      /* 2. Stylowanie linków z klasą .pure-menu-disabled na mobile */
  .pure-menu-disabled {
    color: #999; /* Szary tekst dla linków wyłączonych */
    cursor: not-allowed; /* Zakazany kursor */
    pointer-events: none; /* Brak interakcji */
  }
  .pure-menu-selected {color:#FF5912}
      /* Hover zachowania niepotrzebne */
      .pure-menu-allow-hover:hover > .pure-menu-children {
        display: block;
      }
    }
    
    .numbered-block {
      position: relative;
      padding: 0 0 0 3rem;
      margin-bottom: 2rem;
      background-color: #F4F4F4;
      font-size: 1rem;
      overflow: hidden;
      z-index: 1;
      border-radius: 12px;
      width:50%
    }
    
    /* Wspólny styl pseudo-elementu */
    .numbered-block::before {
      position: absolute;
      top: 0px;
      left: 10px;
      font-size: 5rem;
      font-family: "Roboto Flex", sans-serif;
      font-optical-sizing: auto;
      font-weight: 800;
      font-style: normal;
      color: rgba(0, 0, 0, 0.06);
      z-index: 0;
      pointer-events: none;
      content: "";
    }

    
    /* Liczby generowane sekwencyjnie */
    .numbered-block:nth-child(1)::before { content: "01"; }
    .numbered-block:nth-child(2)::before { content: "02"; }
    .numbered-block:nth-child(3)::before { content: "03"; }
    .numbered-block:nth-child(4)::before { content: "04"; }
    .numbered-block:nth-child(5)::before { content: "05"; }
    /* ...i tak dalej jeśli chcesz więcej */
    
    .numbered-block > * {
      position: relative;
      z-index: 1;
    }

    .numbered-block p {
      margin: 0;
      padding: 1rem;
      font-size: 0.82em;
    }

    .numbered-block h4 {
      margin: 0;
      padding: 3rem 1rem 1rem 1rem;
      font-size: 1.2em;
      font-weight: bold;
      text-align: left;
      letter-spacing: 0.1rem;
    }

/* Google calendar */
    .qxCTlb{min-height:36px;padding:0.5em 1em;border-radius:22px;font-family:Google Sans Text,Google Sans;line-height:20px;border: 1px solid #FF5912;
      letter-spacing:.25px;color:white;cursor:pointer;white-space:break-spaces;word-break:break-word;background-color: #FF5912;transition: background-color 0.3s;}
    .qxCTlb:hover{background-color:white;color:#FF5912;border: 1px solid #FF5912}
    .hur54b{position:fixed;top:0;left:0;width:100%;height:100%;box-sizing:border-box;background-color:rgba(32,33,36,.6);padding:72px;z-index:9999}
    .mmGMM{border:none;border-radius:8px;background-color:white;width:100%;height:100%}
    .Xfsokf{position:fixed;top:26px;right:72px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;
      -webkit-align-items:center;align-items:center;border:none;border-radius:18px;background-color:#1f1f1f;height:36px;padding:16px;cursor:pointer}
    .L0Dvsd{color:#fff;font-size:18px;margin-right:8px}
    .uE25ec{font-size:14px;font-family:"Google Sans",Arial,sans-serif;font-weight:500;letter-spacing:.25px;color:#fff}


    .gray-box-pricing {
      position: relative;
      border: 1px solid #FFF;
      border-radius: 12px;
      margin: 0 0.3em 0 0;
      padding: 6em 1em 1.5em 1em;
      text-align: center;
      background-color: #F4F4F4;
      overflow: hidden;
      z-index: 1;
    }
    
    .gray-box-pricing::before {
      content: "";
      position: absolute;
      inset: 0;
      background-size: contain;
      z-index: 0;
      pointer-events: none;
      background-repeat: no-repeat;
      background-position: center 20%;
      background-size: 15% auto;
    }
    
    /* Inne obrazy dla każdego boxa */
    .bg1::before {
      background-image: url('../img/gfx/konsultacje_psychologiczne.png');
    }
    
    .bg2::before {
      background-image: url('../img/gfx/terapia_w_gabinecie.png');
    }
    
    .bg3::before {
      background-image: url('../img/gfx/terapia_online.png');
    }
    
    .bg4::before {
      background-image: url('../img/gfx/rodzaj_spotkan.png');
    }
    
    .bg5::before {
      background-image: url('../img/gfx/czas_trwania.png');
    }

    .bg6::before {
      background-image: url('../img/gfx/liczba_spotkan.png');
    }

    .bg7::before {
      background-image: url('../img/gfx/miejsce.png');
    }

    /* Upewniamy się, że zawartość jest nad tłem */
    .gray-box-pricing > * {
      position: relative;
      z-index: 1;
    }

    ol#przebiegpomocy li::marker {
      font-weight: bold;
      font-size: 1.2em;
    }